+
+
+ {
+ (this.state.showModal)
+ ? (
+ <>
+ Fuel Purchases
+
+
+ this.setShowModal(true)} className="mr-2 px-2 py-1 rounded bg-green-400 hover:cursor-pointer">Add
+
+ {
+ (this.state.expanded)
+ ?
+
+
+
+
+ ) : null
+ }
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/Header.js b/front-end/src/components/FleetManager-Components/Header.js
new file mode 100644
index 0000000..fa35dd7
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/Header.js
@@ -0,0 +1,18 @@
+import React, {Component} from "react";
+
+export default class Header extends Component {
+
+ render() {
+ return (
+
+ {/*content*/}
+
+
+ {/*header*/}
+
+
+
+ {/*body*/}
+ + Add Fuel Purchase +
+ +
+
+ {/*footer*/}
+
+
+
+ Date
+
+
+ Fuel Purchased
+
+
+
+ Total Cost
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/Sidebar.js b/front-end/src/components/FleetManager-Components/Sidebar.js
new file mode 100644
index 0000000..5fab916
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/Sidebar.js
@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+
+export default class Sidebar extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state={
+
+ }
+ }
+
+ render() {
+
+ var vehicleList = this.props.companyVehicles.map((vehicle, index) => {
+ return (
+
+ Fleet Management
+
+
+
+ {this.props.user.fullName}
+
+ this.props.selectVehicle(vehicle.id)} key={`vehicleList-${index}`} className={`py-2 border-b pl-4 hover:cursor-pointer ${(this.props.selectedVehicle === vehicle.id) ? 'bg-gray-400 text-white': ''}`}>Vehicle {vehicle.name}
+ )
+ })
+
+ return (
+
+ {vehicleList}
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/VehicleInformation.js b/front-end/src/components/FleetManager-Components/VehicleInformation.js
new file mode 100644
index 0000000..c603d7e
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/VehicleInformation.js
@@ -0,0 +1,33 @@
+import React, {Component} from "react";
+
+import VehicleName from "./VehicleInformation/VehicleName";
+import VehicleImage from "./VehicleInformation/VehicleImage";
+import Registration from "./VehicleInformation/Registration";
+import VehicleDetails from "./VehicleInformation/VehicleDetails";
+import ServiceHistory from "./VehicleInformation/ServiceHistory";
+import FuelPurchases from "./FuelPurchases";
+
+export default class VehicleInformation extends Component {
+
+ render() {
+ return (
+
+
+
+ )
+ }
+}
+
diff --git a/front-end/src/components/FleetManager-Components/VehicleInformation/Registration.js b/front-end/src/components/FleetManager-Components/VehicleInformation/Registration.js
new file mode 100644
index 0000000..93807ed
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/VehicleInformation/Registration.js
@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+import EditableTextDisplay from "../../Informational-Components/EditableTextDisplay";
+
+export default class Registration extends Component {
+
+ constructor(props){
+ super(props)
+
+ this.state = {
+ plate: '',
+ expiration: '',
+ locale: ''
+ }
+ }
+
+ editFieldCallBack = (newValue, label) => {
+ this.setState({
+ [label]: newValue
+ })
+ }
+
+ render() {
+
+ return (
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/VehicleInformation/ServiceHistory.js b/front-end/src/components/FleetManager-Components/VehicleInformation/ServiceHistory.js
new file mode 100644
index 0000000..32f5099
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/VehicleInformation/ServiceHistory.js
@@ -0,0 +1,47 @@
+import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, {Component} from "react";
+
+export default class ServiceHistory extends Component {
+
+ constructor(props){
+ super()
+
+ this.state = {
+ expanded: false
+ }
+ }
+
+ toggleExpanded = () => {
+ this.setState({
+ expanded: !this.state.expanded
+ })
+ }
+
+ render() {
+
+ return (
+ <>
+ Registration
+
+
+ Locale:
+
+
+ Plate:
+
+
+ Expiration:
+
+
+ {
+ (this.state.expanded)
+ ? Service History
+
+
+
+ Add
+
+ {
+ (this.state.expanded)
+ ?
+ Service History
+ : null
+ }
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleDetails.js b/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleDetails.js
new file mode 100644
index 0000000..0380918
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleDetails.js
@@ -0,0 +1,46 @@
+import React, {Component} from "react";
+import EditableTextDisplay from "../../Informational-Components/EditableTextDisplay";
+
+export default class VehicleDetails extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ vin: "1HGBH41JXMN109186",
+ year: 2017,
+ make: "Chevrolet",
+ model: "Silverado"
+ }
+ }
+
+ editedTextCallback = (newValue, label) => {
+ this.setState({
+ [label]: newValue
+ })
+ }
+
+ render() {
+ return (
+
+
+ )
+ }
+}
diff --git a/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleImage.js b/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleImage.js
new file mode 100644
index 0000000..d3d9afd
--- /dev/null
+++ b/front-end/src/components/FleetManager-Components/VehicleInformation/VehicleImage.js
@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import { Tooltip } from 'react-tooltip'
+
+export default class VehicleImage extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ imageSet: false,
+ edit: true
+ }
+ }
+
+ updateImage = () => {
+
+ }
+
+ render () {
+ return (
+ <>
+ Information
+
+
+
+ VIN:
+
+
+ Year:
+
+
+ Make:
+
+
+ Model:
+
+
+ {
+ (this.state.imageSet)
+ ? })
+ :
+
+ : Image Not Set
+ }Click to Edit
+
+ {
+ (this.state.loading)
+ ?
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager.js b/front-end/src/components/FleetManager.js
index 8d9d1cc..7c889b7 100644
--- a/front-end/src/components/FleetManager.js
+++ b/front-end/src/components/FleetManager.js
@@ -1,5 +1,36 @@
-export default function FleetManager() {
- return (
-
- )
+import { Component } from "react";
+import Header from "./FleetManager-Components/Header";
+import Sidebar from "./FleetManager-Components/Sidebar";
+import VehicleInformation from "./FleetManager-Components/VehicleInformation";
+
+export default class FleetManager extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ companyVehicles: [
+ {id: 1, name: "1"}, {id: 2, name: "2"}, {id: 3, name: "3"}, {id: 4, name: "4"}, {id: 5, name: "5"}
+ ],
+ selectedVehicle: 3
+ }
+ }
+
+ updateSelectedVehicle = (selected) => {
+ this.setState({
+ selectedVehicle: selected
+ })
+ }
+
+ render () {
+ return (
+
+
+ Save changes
+
+ :
+ {this.state.vehicleName}
+
+ }
+
+
+
+ Edit vehicle name
+
+
+
+ )
+ }
+
}
\ No newline at end of file
diff --git a/front-end/src/components/Informational-Components/EditableTextDisplay.js b/front-end/src/components/Informational-Components/EditableTextDisplay.js
new file mode 100644
index 0000000..c6e9c4a
--- /dev/null
+++ b/front-end/src/components/Informational-Components/EditableTextDisplay.js
@@ -0,0 +1,76 @@
+import React, {Component} from "react";
+import Loading from "./Loading";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCancel, faSave, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { Tooltip } from "react-tooltip";
+export default class EditableTextDisplay extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ editValue: '',
+ loading: false,
+ edit: false
+ }
+ }
+
+ edit = () => {
+ this.setState({
+ editValue: this.props.defaultValue,
+ edit: true
+ })
+ }
+
+ handleChange = (event) => {
+ this.setState({
+ editValue: event.target.value
+ })
+ }
+
+ cancel = () => {
+ this.setState({
+ editValue: '',
+ edit: false
+ })
+ }
+
+ propagateChange = () => {
+ this.props.callback(this.state.editValue, this.props.label);
+
+ this.setState({
+ edit: false
+ })
+ }
+
+ render () {
+ return (
+
+
+
+
+ {
+ (this.state.loading)
+ ?
+ )
+ }
+}
\ No newline at end of file
diff --git a/front-end/src/components/Informational-Components/Loading.js b/front-end/src/components/Informational-Components/Loading.js
new file mode 100644
index 0000000..10bd3d4
--- /dev/null
+++ b/front-end/src/components/Informational-Components/Loading.js
@@ -0,0 +1,9 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+
+export default function Loading() {
+ return (
+
+
+
+ Save {this.props.label.toUpperCase()}
+
+
+ Cancel {this.props.label.toUpperCase()} Edit
+
+
+ :
+
+ Edit {this.props.label.toUpperCase()}
+
+
+
+ }
+ {this.props.defaultValue}
+