import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { MembersDropdown } from './Members.js';
import { isAdmin, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
export function TransactionEditor(props) {
const { token, input, setInput, error, noMemberSearch } = props;
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const makeProps = (name) => ({
name: name,
onChange: handleChange,
value: input[name] || '',
error: error[name],
});
const accountOptions = [
{ key: '0', text: 'Cash (CAD Lock Box)', value: 'Cash' },
{ key: '1', text: 'Interac (Email) Transfer (TD)', value: 'Interac' },
{ key: '2', text: 'Square (Credit)', value: 'Square Pmt' },
{ key: '3', text: 'Dream Payments (Debit/Credit)', value: 'Dream Pmt' },
{ key: '4', text: 'Deposit to TD (Not Interac)', value: 'TD Chequing' },
{ key: '5', text: 'PayPal', value: 'PayPal' },
{ key: '6', text: 'Member Balance / Protocash', value: 'Member' },
{ key: '7', text: 'Supense (Clearing) Acct / Membership Adjustment', value: 'Clearing' },
];
const sourceOptions = [
{ key: '0', text: 'Web (Spaceport)', value: 'Web' },
{ key: '1', text: 'Database Edit', value: 'DB Edit' },
{ key: '2', text: 'System', value: 'System' },
{ key: '3', text: 'Receipt or Statement', value: 'Receipt or Stmt' },
{ key: '4', text: 'Quicken Import', value: 'Quicken Import' },
{ key: '5', text: 'PayPal IPN', value: 'PayPal IPN' },
{ key: '6', text: 'Auto', value: 'Auto' },
{ key: '7', text: 'Nexus Database Bulk', value: 'Nexus DB Bulk' },
{ key: '8', text: 'IPN Trigger', value: 'IPN Trigger' },
{ key: '9', text: 'Intranet Receipt', value: 'Intranet Receipt' },
{ key: '10', text: 'Automatic', value: 'Automatic' },
{ key: '11', text: 'Manual', value: 'Manual' },
];
const categoryOptions = [
{ key: '0', text: 'Membership Dues', value: 'Membership' },
{ key: '1', text: 'Payment On Account or Prepayment', value: 'OnAcct' },
{ key: '2', text: 'Snack / Pop / Coffee', value: 'Snacks' },
{ key: '3', text: 'Donations', value: 'Donation' },
{ key: '4', text: 'Consumables (Specify which in memo)', value: 'Consumables' },
{ key: '5', text: 'Purchases of Goods or Parts or Stock', value: 'Purchases' },
{ key: '6', text: 'Auction, Garage Sale, Nearly Free Shelf, Etc.', value: 'Garage Sale' },
{ key: '7', text: 'Reimbursement (Enter a negative value)', value: 'Reimburse' },
{ key: '8', text: 'Other (Explain in memo)', value: 'Other' },
];
return (
{!noMemberSearch &&
}
);
};
function EditTransaction(props) {
const { transaction, setTransaction, token, refreshUser } = props;
const [input, setInput] = useState(transaction);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
setSuccess(false);
const data = { ...input, report_type: null, report_memo: '' };
requester('/transactions/'+id+'/', 'PUT', token, data)
.then(res => {
setLoading(false);
setSuccess(true);
setError(false);
setInput(res);
setTransaction(res);
if (refreshUser) {
refreshUser();
}
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
{transaction.report_type ? 'Save & Unreport' : 'Save'}
{success &&
Success!
}
);
};
function ReportTransaction(props) {
const { transaction, setTransaction, token, refreshUser } = props;
const [input, setInput] = useState(transaction);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
setSuccess(false);
requester('/transactions/'+id+'/report/', 'POST', token, input)
.then(res => {
setLoading(false);
setSuccess(true);
setError(false);
if (refreshUser) {
refreshUser();
}
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
const makeProps = (name) => ({
name: name,
onChange: handleChange,
value: input[name] || '',
error: error[name],
});
return (
If this transaction was made in error or there is anything incorrect about it, please report it using this form.
A staff member will review the report as soon as possible.
Follow up with directors@protospace.ca.
Submit Report
{success &&
Success!
}
);
};
export function TransactionList(props) {
const { transactions } = props;
return (
Date
Amount
Account
Memo
{transactions.length ?
transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x =>
{x.date}
${x.amount}
{x.account_type}
{x.memo || x.report_memo}
)
:
None
}
);
};
export function Transactions(props) {
const { user } = props;
return (
);
};
export function TransactionDetail(props) {
const { token, user } = props;
const { id } = useParams();
const ownTransaction = user.transactions.find(x => x.id == id);
const [transaction, setTransaction] = useState(ownTransaction || false);
const [error, setError] = useState(false);
useEffect(() => {
requester('/transactions/'+id+'/', 'GET', token)
.then(res => {
setTransaction(res);
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
}, [ownTransaction]);
return (
{!error ?
transaction ?
Member:
{isAdmin(user) && transaction.member_id ?
{transaction.member_name}
:
{transaction.member_name}
}
ID:
{transaction.id}
Date:
{transaction.date}
Amount:
${transaction.amount}
Category:
{transaction.category}
Account:
{transaction.account_type}
Payment Method
{transaction.payment_method}
Info Source:
{transaction.info_source}
Reference:
{transaction.reference_number}
Memo:
{transaction.memo}
{!!transaction.report_type &&
Report Type:
{transaction.report_type}
}
{!!transaction.report_memo &&
Report Memo:
{transaction.report_memo}
}
{isAdmin(user) ?
:
}
:
Loading...
:
}
);
};