Skip to content

Instantly share code, notes, and snippets.

@hartmamt

hartmamt/ExpenseReport.js

Last active August 29, 2015 14:09
Show Gist options
  • Save hartmamt/a262bc958bf72a6cb3a4 to your computer and use it in GitHub Desktop.
Save hartmamt/a262bc958bf72a6cb3a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ExpenseReport.js
/**
* @jsx React.DOM
*/
var MealCalc = React.createClass({
render: function() {
var total = this.props.meals.reduce(
function(previousValue, currentValue, index, array) {
return {
Breakfast: previousValue.Breakfast + currentValue.Breakfast,
Lunch: previousValue.Lunch + currentValue.Lunch,
Dinner: previousValue.Dinner + currentValue.Dinner
};
});
return (
<tr>
<td colSpan="2">Total (include Tips)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{total.Breakfast + total.Lunch + total.Dinner}</td>
<td></td>
</tr>
);
}
}
);
var MilesCalc = React.createClass({
render: function() {
var total = this.props.miles.reduce(
function(previousValue, currentValue, index, array) {
return {
distance: (previousValue.distance) + (currentValue.distance)
};
});
return (
<tr>
<td colSpan="2">Mult. By Allow per mile (.45 cents)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>${total.distance * .45}</td>
<td></td>
</tr>
);
}
}
);
var MilesRow = React.createClass({
render: function() {
var total = this.props.miles.reduce(
function(previousValue, currentValue, index, array) {
return {
distance: previousValue.distance + currentValue.distance
};
});
return (
<tr>
<td colSpan="2"><strong>Miles Driven</strong></td>
<td>{this.props.miles[0].distance}</td>
<td>{this.props.miles[1].distance}</td>
<td>{this.props.miles[2].distance}</td>
<td>{this.props.miles[3].distance}</td>
<td>{this.props.miles[4].distance}</td>
<td>{this.props.miles[5].distance}</td>
<td>{this.props.miles[6].distance}</td>
<td>{total}</td>
<td></td>
</tr>
);
}
}
);
var MealRow = React.createClass({
render: function() {
var total=0;
if (this.props.meal=="Breakfast") {
var total = this.props.meals.reduce(
function(previousValue, currentValue, index, array) {
return {
Breakfast: previousValue.Breakfast + currentValue.Breakfast
};
});
return (
<tr>
<td></td>
<td>{this.props.meal}</td>
<td>{this.props.meals[0].Breakfast}</td>
<td>{this.props.meals[1].Breakfast}</td>
<td>{this.props.meals[2].Breakfast}</td>
<td>{this.props.meals[3].Breakfast}</td>
<td>{this.props.meals[4].Breakfast}</td>
<td>{this.props.meals[5].Breakfast}</td>
<td>{this.props.meals[6].Breakfast}</td>
<td>{total}</td>
<td></td>
</tr>
);
} else if (this.props.meal=="Lunch") {
var total = this.props.meals.reduce(
function(previousValue, currentValue, index, array) {
return {
Lunch: previousValue.Lunch + currentValue.Lunch
};
});
return (
<tr>
<td></td>
<td>{this.props.meal}</td>
<td>{this.props.meals[0].Lunch}</td>
<td>{this.props.meals[1].Lunch}</td>
<td>{this.props.meals[2].Lunch}</td>
<td>{this.props.meals[3].Lunch}</td>
<td>{this.props.meals[4].Lunch}</td>
<td>{this.props.meals[5].Lunch}</td>
<td>{this.props.meals[6].Lunch}</td>
<td>{total}</td>
<td></td>
</tr>
);
} else if (this.props.meal=="Dinner") {
var total = this.props.meals.reduce(
function(previousValue, currentValue, index, array) {
return {
Dinner: previousValue.Dinner + currentValue.Dinner
};
});
return (
<tr>
<td></td>
<td>{this.props.meal}</td>
<td>{this.props.meals[0].Dinner}</td>
<td>{this.props.meals[1].Dinner}</td>
<td>{this.props.meals[2].Dinner}</td>
<td>{this.props.meals[3].Dinner}</td>
<td>{this.props.meals[4].Dinner}</td>
<td>{this.props.meals[5].Dinner}</td>
<td>{this.props.meals[6].Dinner}</td>
<td>{total}</td>
<td></td>
</tr>
);
}
}
}
);
var DateRow = React.createClass({
render: function() {
return (
<tr>
<td colSpan="2">Date</td>
<td>Sunday<br/>Sept 7, 2014</td>
<td>Monday<br/>Sept 8, 2014</td>
<td>Tuesday<br/>Sept 9, 2014</td>
<td>Wednesday<br />Sept 10, 2014</td>
<td>Thursday<br />Sept 11, 2014</td>
<td>Friday<br />Sept 12, 2014</td>
<td>Saturday<br />Sept 13, 2014</td>
<td>Totals</td>
<td></td>
</tr>
);
}
}
);
var ExpenseReport = React.createClass({
render: function() {
var miles = this.props.miles;
var meals = this.props.meals;
return (
<table width="100%" border="1">
<tr>
<th>Section 1</th>
<th colSpan="9">Auto and Meals Expense</th>
<th> Section 3 Comments</th>
</tr>
<DateRow startDate = "09/07/2014" />
<MilesRow miles={miles} />
<MilesCalc miles={miles} />
<MealRow meals={meals} meal="Breakfast"/>
<MealRow meals={meals} meal="Lunch"/>
<MealRow meals={meals} meal="Dinner"/>
<MealCalc meals={meals}/>
</table>
);
},
});
/* mock data */
var miles = [
{distance:3.3},
{distance:4.0},
{distance:2.0},
{distance:0.0},
{distance:0.0},
{distance:0.0},
{distance:22}
];
var meals = [
{Breakfast:2.0,Lunch:3.5,Dinner:9.9},
{Breakfast:9.0,Lunch:3.5,Dinner:9.9},
{Breakfast:0.0,Lunch:12.5,Dinner:20},
{Breakfast:8.4,Lunch:5,Dinner:30},
{Breakfast:9.9,Lunch:3.5,Dinner:32},
{Breakfast:2.0,Lunch:3.5,Dinner:9},
{Breakfast:5,Lunch:8,Dinner:22.30}
];
React.renderComponent(<ExpenseReport miles={miles} meals={meals} />, document.body);
Raw
gistfile1.html
<table width="100%" border="1">
<tr>
<th>Section 1</th>
<th colspan="9">Auto & Meals Expense</th>
<th> Section 3 Comments</th>
</tr>
<tr>
<td colspan="2" style="font-weight: 700">Date</td>
<td style="font-weight: 700">Sunday<br />Sept 7, 2014</td>
<td style="font-weight: 700">Monday<br />Sept 8, 2014</td>
<td style="font-weight: 700">Tuesday<br />Sept 9, 2014</td>
<td style="font-weight: 700">Wednesday<br />Sept 10, 2014</td>
<td style="font-weight: 700">Thursday<br />Sept 11, 2014</td>
<td style="font-weight: 700">Friday<br />Sept 12, 2014</td>
<td style="font-weight: 700">Saturday<br />Sept 13, 2014</td>
<td style="font-weight: 700">Totals</td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Miles Driven</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" style="font-weight: 700">Mult. By Allow per mile (.45 cents)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Breakfast</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Lunch</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Dinner</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" style="font-weight: 700">Total (include Tips)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><td colspan="11">&nbsp;</td></tr>
<tr>
<td colspan="2" style="font-weight: 700">Entertainment</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" style="text-align:right; font-weight: 700;">Totals</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="text-align:right; font-weight: 700;">Section 1 Subtotal</td>
<td></td>
<td></td>
</tr>
<tr>
<th>Section 2</th>
<th colspan="9">Other Expenses</th>
<th>Section 4 Accouting Use Only</th>
</tr>
<tr>
<td colspan="2"></td>
<td style="font-weight: 700">Sept 7, 2014</td>
<td style="font-weight: 700">Sept 8, 2014</td>
<td style="font-weight: 700">Sept 9, 2014</td>
<td style="font-weight: 700">Sept 10, 2014</td>
<td style="font-weight: 700">Sept 11, 2014</td>
<td style="font-weight: 700">Sept 12, 2014</td>
<td style="font-weight: 700">Sept 13, 2014</td>
<td style="font-weight: 700">Totals</td>
<td></td>
</tr>
<tr>
<td rowspan="4" style="font-weight: 700">Transportation</td>
<td>Car Rental</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Plane, Bus, etc</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Taxi, Parking, etc</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Fuel</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="font-weight: 700">Lodging</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="6" style="font-weight: 700">Misc</td>
<td>Misc</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Hotel</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Supplies</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Training / Seminar</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Vehicle Expense</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Tool Bow Towing</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" style="text-align:right; font-weight: 700;">Totals</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="text-align:right; font-weight: 700;">Section 2 Subtotal</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="text-align:right; font-weight: 700;">Total Expenses</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="text-align:right; font-weight: 700;">Less Amount Advanced</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="text-align:right; font-weight: 700;">Amout Due to Employee</td>
<td></td>
<td></td>
</tr>
</table>
Raw
gistfile2.html
<a href="http://jsfiddle.net/4TpnG/444/">Expense Fiddle</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment