This is part of a tool for recording travel expenses on overseas trips.
I need a single dynamic page built using JQuery. This will interact via Ajax with a back-end system that I will be writing myself: for this job it can be faked up in any language of your choosing to return dummy hard-coded results.
This is a complex input form with progressive reveal and single submit. It
**must** be implemented using jQuery. It will interact with a backend system that is not yet written. All Ajax calls should be mocked up for now (I expect that return values will be JSON, but I'm open to persuasion otherwise).
There are several successive inputs:
1) First should be a date input. Nothing else can be entered (or should even be visible) until a date is selected. I don't know what the current 'state of the art' is for JQuery date pickers, but it must also allow simple text entry. It should also allow short-form date entry - entering a date without a year should auto-complete to the right year (all dates should be in the past, so if the date < today, then it's this year; if it's > today, then last year). Dates more than one year in the past must also be supported. Similarly, if no month is supplied, it should default to this month/last month.
2) Next comes the location. Based on the date, it should next display a guessed location (via an Ajax call that for now can just be dummied up). This should display a flag for the country the system believes the user was in at that time, but as we won't always know that information definitively it should also display a small number of alternative location flags (that will also be returned as alternatives from the Ajax call) that can, with a single click, change the selected location. If the real country was none of these the user also needs to be able to select the correct location from a drop-down list of all countries. There should be no free text input here.
3) Then the user should enter a 'Payee'. This should auto-complete via Ajax (again, can just be dummied up). This needs to be able to cope with chains (e.g. hotels) that are in multiple locations and treat them as separate yet related entities. Once selected/entered, if this is a recognised Payee, then the system should display their full address/contact details (these must not be editable). If they are not a recognised Payee, the system should allow (but not compel) the user to enter those details. This data will be unstructured: a simple multi-line input box should suffice. It is crucial, however, that the user be able to easily distinguish between an entirely new Payee and a new location of an existing one (e.g. although Hilton Hotels are already on the system, this is the first time someone has stayed at their Paris location).
4) The user will then enter the individual line items from their receipt. Each line must have an an item and price and may have notes. There should also be an optional quantity (defaulting to 1) for each line item. It should be possible to increase the quantity several times simply by clicking an up-arrow (or correct again by a down arrow) or, for ease with larger numbers, simply overtype the quantity. When the quantity is greater than 1, the line should show a total price as well as the unit price. As each line item is entered it should show below the input area (i.e. each successive line item is entered at the same place in the page, with previously entered items appearing below the entry box). Completed line entries should be re-editable. A running total should also appear below the line items.
Based on the Payee (again via an Ajax call that can be mocked for now), there may also be a series of potential line items that can be selected by clicking them from a list (and adjusting as necessary) rather than typing them. Some of these suggestions will have prices included, others the price field will be blank and must be entered manually. It should always be possible to override the proposed price. It should also be possible to discard any of the items from the list, and for the list to automatically repopulate after picking or discarding (e.g. if you are staying in a known hotel it will offer the top 5 most likely things from your bill: accommodation, dinner, breakfast, telephone, minibar. As you select or discard the list will refill with other possibilities). Some of the potential items may have a related image that should be displayed instead of simply plain text. It is important that this looks good even when some of the items have images and others don't. The user should also be able to make this entire list disappear.
5) Finally the user should be able to submit the form. This should not be possible until all data, including at least one line item, is entered. At any point during the process, however, the user should be able to cancel data entry via a prominent button. Once data has been entered this should have an "are you sure" prompt.
There should be a simple path through the entire screen without needing to use a mouse. An experienced user should be able to quickly complete everything simply by typing, auto-completing where appropriate, and tabbing to the next field.
It is important that the page look good. It should be stylishly functional. Ideally there should be no image elements (other than the country flags), although this is not an absolute requirement (any that are used, however, must be either be delivered as part of the project, or freely usable and distributable). At each stage of input it should be obvious where you are on the page and what you're doing: probably via extra large input boxes or equivalent. All previous information should be visible (although it can be smaller when you're at a later stage), and it should be possible to go back and correct any earlier mistakes at any point.