build out mock views

This commit is contained in:
Casey Wittrock 2025-10-24 03:40:53 -05:00
parent 6dac3bfb02
commit 403b29a8b8
12 changed files with 1066 additions and 70 deletions

View File

@ -31,7 +31,7 @@ import SideBar from "./components/SideBar.vue";
max-width: 1280px;
min-width: 800px;
margin: 10px auto;
height: 80vh;
min-height: 84vh;
}
#display-content {

View File

@ -14,6 +14,16 @@ class Api {
// }
// console.log("DEBUG: API - Fetched Client Details: ", data);
const data = DataUtils.dummyClientData;
console.log("DEBUG: API - getClientDetails result: ", data);
return data;
}
static async getJobDetails() {
const data = DataUtils.dummyJobData.map((job) => ({
...job,
stepProgress: DataUtils.calculateStepProgress(job.steps),
}));
console.log("DEBUG: API - getJobDetails result: ", data);
return data;
}

View File

@ -1,41 +1,52 @@
<template lang="html">
<div id="paging-controls">
<p>Show rows:</p>
<button class="page-num-button">25</button>
<button class="page-num-button">50</button>
<button class="page-num-button">100</button>
<button class="page-turn-button">Prev</button>
<button class="page-turn-button">Next</button>
</div>
<div>
<DataTable :value="data">
<Column
v-for="col in columns"
:key="col.fieldName"
:field="col.fieldName"
:header="col.label"
>
<template #body="slotProps">
<template v-if="col.type === 'status'">
<Badge
:value="slotProps.data[col.fieldName]"
:severity="getBadgeColor(slotProps.data[col.fieldName])"
:size="large"
/>
</template>
<template v-else>
{{ slotProps.data[col.fieldName] }}
</template>
</template>
</Column>
</DataTable>
</div>
<DataTable
:value="data"
:rowsPerPageOptions="[5, 10, 20, 50]"
:paginator="true"
:rows="10"
sortMode="multiple"
removableSort
filterDisplay="row"
v-model:filters="filterRef"
scrollable
scrollHeight="70vh"
v-model:selection="selectedRows"
selectionMode="multiple"
metaKeySelection="true"
dataKey="id"
>
<Column
v-for="col in columns"
:key="col.fieldName"
:field="col.fieldName"
:header="col.label"
:sortable="col.sortable"
>
<template v-if="col.filterable === true" #filter="{ filterModel, filterCallback }">
<InputText
v-model="filterModel.value"
type="text"
@input="filterCallback()"
placeholder="Search by name"
/>
</template>
<template v-if="col.type === 'status'" #body="slotProps">
<Tag
:value="slotProps.data[col.fieldName]"
:severity="getBadgeColor(slotProps.data[col.fieldName])"
/>
</template>
</Column>
</DataTable>
</template>
<script setup>
import { defineProps } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Badge from "primevue/badge";
import Tag from "primevue/tag";
import InputText from "primevue/inputtext";
import { ref } from "vue";
import { FilterMatchMode } from "@primevue/core";
const props = defineProps({
columns: {
type: Array,
@ -45,15 +56,24 @@ const props = defineProps({
type: Array,
required: true,
},
filters: {
type: Object,
default: () => ({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
}),
},
});
const filterRef = ref(props.filters);
const selectedRows = ref();
const getBadgeColor = (status) => {
console.log("DEBUG: - getBadgeColor status", status);
switch (status?.toLowerCase()) {
case "completed":
return "success"; // green
case "in progress":
case "warn":
return "warning"; // yellow
return "warn";
case "not started":
return "danger"; // red
default:

View File

View File

@ -11,6 +11,7 @@ import {
Clock,
HistoricShield,
} from "@iconoir/vue";
import SpeedDial from "primevue/speeddial";
const router = useRouter();
const categories = [
@ -19,10 +20,40 @@ const categories = [
{ name: "Clients", icon: Community, url: "/clients" },
{ name: "Jobs", icon: Hammer, url: "/jobs" },
{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
{ name: "Create", icon: MultiplePagesPlus, url: "/create" },
{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
{
name: "Create New",
icon: MultiplePagesPlus,
},
];
const items = ref([
{
label: "Client",
command: () => {
frappe.new_doc("Customer");
},
},
{
label: "Estimate",
command: () => {
frappe.new_doc("Estimate");
},
},
{
label: "Job",
command: () => {
frappe.new_doc("Job");
},
},
{
label: "Invoice",
command: () => {
frappe.new_doc("Sales Invoice");
},
},
]);
const handleCategoryClick = (category) => {
router.push(category.url);
};
@ -30,19 +61,44 @@ const handleCategoryClick = (category) => {
<template>
<div id="sidebar" class="sidebar">
<button
v-for="category in categories"
:class="[
'sidebar-button',
router.currentRoute.value.path === category.url ? 'active' : '',
]"
:key="category.name"
@click="handleCategoryClick(category)"
>
<component :is="category.icon" class="button-icon" /><span class="button-text">{{
category.name
}}</span>
</button>
<template v-for="category in categories">
<template v-if="category.url">
<button
:class="[
'sidebar-button',
router.currentRoute.value.path === category.url ? 'active' : '',
]"
:key="category.name"
@click="handleCategoryClick(category)"
>
<component :is="category.icon" class="button-icon" /><span
class="button-text"
>{{ category.name }}</span
>
</button>
</template>
<template v-else>
<SpeedDial :model="items" direction="down" type="linear" radius="50">
<template #button="{ toggleCallback }">
<button
class="sidebar-button"
@click="toggleCallback"
:key="category.name"
>
<component :is="category.icon" class="button-icon" /><span
class="button-text"
>{{ category.name }}</span
>
</button>
</template>
<template #item="{ item, toggleCallback }">
<button class="create-item" @click="toggleCallback" :key="item.label">
<span class="p-menuitem-text">{{ item.label }}</span>
</button>
</template>
</SpeedDial>
</template>
</template>
</div>
</template>
@ -61,6 +117,15 @@ const handleCategoryClick = (category) => {
margin-left: 5px;
}
.create-item {
border: none;
background-color: transparent;
width: 100%;
text-align: left;
padding: 5px 10px;
cursor: pointer;
}
.button-text {
margin-left: auto;
margin-right: auto;
@ -85,5 +150,6 @@ const handleCategoryClick = (category) => {
padding: 10px;
border-radius: 5px;
margin-top: 10px;
position: relative;
}
</style>

View File

@ -2,20 +2,18 @@
<div>
<H2>Client Contact List</H2>
<div id="filter-container" class="filter-container">
<input placeholder="Type to Search" />
<p>Type:</p>
<select id="type-selector"></select>
<button @click="onClick" id="add-customer-button" class="interaction-button">
Add
</button>
</div>
<DataTable :data="tableData" :columns="columns" />
<DataTable :data="tableData" :columns="columns" :filters="filters" />
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";
const tableData = ref([]);
@ -23,12 +21,27 @@ const onClick = () => {
frappe.new_doc("Customer");
};
const filters = {
fullName: { value: null, matchMode: FilterMatchMode.CONTAINS },
};
const columns = [
{ label: "Name", fieldName: "fullName", type: "text" },
{ label: "Appt. Scheduled", fieldName: "appointmentScheduled", type: "status" },
{ label: "Estimate Sent", fieldName: "estimateSent", type: "status" },
{ label: "Payment Received", fieldName: "paymentReceived", type: "status" },
{ label: "Job Status", fieldName: "jobStatus", type: "status" },
{
label: "Name",
fieldName: "fullName",
type: "text",
sortable: true,
filterable: true,
},
{
label: "Appt. Scheduled",
fieldName: "appointmentScheduled",
type: "status",
sortable: true,
},
{ label: "Estimate Sent", fieldName: "estimateSent", type: "status", sortable: true },
{ label: "Payment Received", fieldName: "paymentReceived", type: "status", sortable: true },
{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
];
onMounted(async () => {
if (tableData.value.length > 0) {

View File

@ -1,9 +1,363 @@
<template lang="">
<div>
<h2>Hello!</h2>
<template>
<div class="dashboard">
<h1 class="dashboard-title">Dashboard</h1>
<div class="widgets-grid">
<!-- Calendar Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<Calendar class="widget-icon" />
<h3>Upcoming Schedule</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="metric">
<span class="metric-number">8</span>
<span class="metric-label">Appointments Today</span>
</div>
<div class="metric">
<span class="metric-number">15</span>
<span class="metric-label">This Week</span>
</div>
<Button
label="View Calendar"
size="small"
outlined
@click="navigateTo('/calendar')"
/>
</div>
</template>
</Card>
<!-- Clients Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<Community class="widget-icon" />
<h3>Client Overview</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="status-row">
<Tag severity="success" value="5 Active" />
<Tag severity="warning" value="3 Pending" />
</div>
<div class="metric">
<span class="metric-number">{{ clientData.length }}</span>
<span class="metric-label">Total Clients</span>
</div>
<Button
label="Manage Clients"
size="small"
outlined
@click="navigateTo('/clients')"
/>
</div>
</template>
</Card>
<!-- Jobs Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<Hammer class="widget-icon" />
<h3>Active Jobs</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="status-row">
<Tag severity="info" value="4 In Progress" />
<Tag severity="success" value="2 Completed" />
</div>
<div class="metric">
<span class="metric-number">{{
jobData.filter((job) => job.overAllStatus === "in progress").length
}}</span>
<span class="metric-label">Active Jobs</span>
</div>
<Button
label="View Jobs"
size="small"
outlined
@click="navigateTo('/jobs')"
/>
</div>
</template>
</Card>
<!-- Routes Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<PathArrowSolid class="widget-icon" />
<h3>Route Planning</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="metric">
<span class="metric-number">6</span>
<span class="metric-label">Routes Today</span>
</div>
<div class="metric">
<span class="metric-number">45.2</span>
<span class="metric-label">Avg. Miles/Route</span>
</div>
<Button
label="Plan Routes"
size="small"
outlined
@click="navigateTo('/routes')"
/>
</div>
</template>
</Card>
<!-- Time Sheets Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<Clock class="widget-icon" />
<h3>Time Tracking</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="metric">
<span class="metric-number">32.5</span>
<span class="metric-label">Hours This Week</span>
</div>
<div class="status-row">
<Tag severity="success" value="5 Completed" />
<Tag severity="warning" value="2 Pending" />
</div>
<Button
label="View Timesheets"
size="small"
outlined
@click="navigateTo('/timesheets')"
/>
</div>
</template>
</Card>
<!-- Warranties Widget -->
<Card class="widget-card">
<template #header>
<div class="widget-header">
<HistoricShield class="widget-icon" />
<h3>Warranties</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<div class="metric">
<span class="metric-number">23</span>
<span class="metric-label">Active Warranties</span>
</div>
<div class="status-row">
<Tag severity="danger" value="3 Expiring Soon" />
</div>
<Button
label="Manage Warranties"
size="small"
outlined
@click="navigateTo('/warranties')"
/>
</div>
</template>
</Card>
</div>
<!-- Quick Stats Summary -->
<div class="summary-section">
<Card>
<template #header>
<h3>Quick Stats</h3>
</template>
<template #content>
<div class="stats-grid">
<div class="stat-item">
<span class="stat-value">{{ totalRevenue }}</span>
<span class="stat-label">Monthly Revenue</span>
</div>
<div class="stat-item">
<span class="stat-value">{{ completedJobs }}</span>
<span class="stat-label">Jobs Completed</span>
</div>
<div class="stat-item">
<span class="stat-value">{{ clientSatisfaction }}%</span>
<span class="stat-label">Client Satisfaction</span>
</div>
<div class="stat-item">
<span class="stat-value">{{ avgResponseTime }}h</span>
<span class="stat-label">Avg Response Time</span>
</div>
</div>
</template>
</Card>
</div>
</div>
</template>
<script>
export default {};
<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import Card from "primevue/card";
import Button from "primevue/button";
import Tag from "primevue/tag";
import { Calendar, Community, Hammer, PathArrowSolid, Clock, HistoricShield } from "@iconoir/vue";
import DataUtils from "../../utils.js";
const router = useRouter();
// Dummy data from utils
const clientData = ref(DataUtils.dummyClientData);
const jobData = ref(DataUtils.dummyJobData);
// Computed values for dashboard metrics
const totalRevenue = computed(() => "$47,250");
const completedJobs = computed(
() => jobData.value.filter((job) => job.overAllStatus === "completed").length,
);
const clientSatisfaction = computed(() => 94);
const avgResponseTime = computed(() => 2.3);
const navigateTo = (path) => {
router.push(path);
};
</script>
<style lang=""></style>
<style scoped>
.dashboard {
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}
.dashboard-title {
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.5rem;
font-weight: 300;
}
.widgets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.widget-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.widget-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.widget-header {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 20px 0;
}
.widget-icon {
color: rgb(69, 112, 101);
width: 24px;
height: 24px;
}
.widget-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.2rem;
}
.widget-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.metric {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.metric-number {
font-size: 2rem;
font-weight: bold;
color: rgb(69, 112, 101);
}
.metric-label {
color: #666;
font-size: 0.9rem;
}
.status-row {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.summary-section {
margin-top: 30px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.stat-item {
text-align: center;
padding: 20px;
border-radius: 8px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.stat-value {
display: block;
font-size: 2rem;
font-weight: bold;
color: rgb(69, 112, 101);
margin-bottom: 5px;
}
.stat-label {
color: #666;
font-size: 0.9rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.widgets-grid {
grid-template-columns: 1fr;
}
.dashboard-title {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>

View File

@ -1,9 +1,29 @@
<template>
<div>
<h2>Jobs</h2>
<DataTable :data="tableData" :columns="columns" />
</div>
</template>
<script>
export default {};
<script setup>
import DataTable from "../DataTable.vue";
import { ref, onMounted } from "vue";
import Api from "../../api";
const tableData = ref([]);
const columns = [
{ label: "Job ID", fieldName: "jobId", type: "text", sortable: true },
{ label: "Address", fieldName: "address", type: "text", sortable: true },
{ label: "Customer", fieldName: "customer", type: "text", sortable: true },
{ label: "Overall Status", fieldName: "overAllStatus", type: "status", sortable: true },
{ label: "Progress", fieldName: "stepProgress", type: "text", sortable: true },
];
onMounted(async () => {
if (tableData.value.length > 0) {
return;
}
let data = await Api.getJobDetails();
tableData.value = data;
});
</script>
<style lang=""></style>

View File

@ -0,0 +1,5 @@
import Aura from "@primeuix/themes/aura";
export const globalSettings = {
theme: Aura,
};

View File

@ -3,5 +3,16 @@ import "./style.css";
import App from "./App.vue";
import router from "./router";
import PrimeVue from "primevue/config";
import { globalSettings } from "./globalSettings";
createApp(App).use(router).use(PrimeVue).mount("#custom-ui-app");
createApp(App)
.use(router)
.use(PrimeVue, {
theme: {
options: {
darkModeSelector: false,
},
preset: globalSettings.theme,
},
})
.mount("#custom-ui-app");

View File

@ -0,0 +1,36 @@
import { defineStore } from "pinia";
export const useModalsStore = defineStore("modals", {
state: () => ({
isCreateClientOpen: false,
isCreateInvoiceOpen: false,
isCreateJobOpen: false,
isCreateEstimateOpen: false,
}),
actions: {
openCreateClient() {
this.isCreateClientOpen = true;
},
closeCreateClient() {
this.isCreateClientOpen = false;
},
openCreateInvoice() {
this.isCreateInvoiceOpen = true;
},
closeCreateInvoice() {
this.isCreateInvoiceOpen = false;
},
openCreateJob() {
this.isCreateJobOpen = true;
},
closeCreateJob() {
this.isCreateJobOpen = false;
},
openCreateEstimate() {
this.isCreateEstimateOpen = true;
},
closeCreateEstimate() {
this.isCreateEstimateOpen = false;
},
},
});

View File

@ -5,29 +5,39 @@ class DataUtils {
// return clients.map((client) => [clientName, client.]
// }
static calculateStepProgress(steps) {
if (!steps || steps.length === 0) return "0/0";
const completedSteps = steps.filter((step) => step.status === "completed").length;
return `${completedSteps}/${steps.length}`;
}
static dummyClientData = [
{
id: 1,
fullName: "John Doe 123 Lane Dr Cityville, MN",
appointmentScheduled: "completed",
estimateSent: "pending",
estimateSent: "in progress",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 2,
fullName: "Jane Smith 456 Oak St Townsville, CA",
appointmentScheduled: "pending",
appointmentScheduled: "in progress",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 3,
fullName: "Mike Johnson 789 Pine Rd Villagetown, TX",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "pending",
paymentReceived: "in progress",
jobStatus: "in progress",
},
{
id: 4,
fullName: "Emily Davis 321 Maple Ave Hamlet, FL",
appointmentScheduled: "not started",
estimateSent: "not started",
@ -35,12 +45,463 @@ class DataUtils {
jobStatus: "not started",
},
{
id: 5,
fullName: "David Wilson 654 Cedar Blvd Borough, NY",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "completed",
jobStatus: "completed",
},
// create 30 more dummy entries
{
id: 6,
fullName: "Sarah Brown 987 Birch Ln Metropolis, IL",
appointmentScheduled: "in progress",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 7,
fullName: "Chris Taylor 159 Spruce Ct Capital City, WA",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "in progress",
jobStatus: "in progress",
},
{
id: 8,
fullName: "Amanda Martinez 753 Willow Dr Smalltown, OH",
appointmentScheduled: "not started",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 9,
fullName: "Joshua Anderson 852 Aspen Rd Bigcity, NJ",
appointmentScheduled: "completed",
estimateSent: "in progress",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 10,
fullName: "Olivia Thomas 147 Cypress St Uptown, GA",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "completed",
jobStatus: "completed",
},
{
id: 11,
fullName: "Daniel Jackson 369 Fir Ave Downtown, MI",
appointmentScheduled: "in progress",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 12,
fullName: "Sophia White 258 Palm Blvd Riverside, AZ",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "in progress",
jobStatus: "in progress",
},
{
id: 13,
fullName: "Matthew Harris 951 Olive Ln Seaside, OR",
appointmentScheduled: "not started",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 14,
fullName: "Isabella Clark 753 Magnolia Ct Hilltown, SC",
appointmentScheduled: "completed",
estimateSent: "in progress",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 15,
fullName: "Andrew Lewis 357 Dogwood Dr Lakeview, VT",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "completed",
jobStatus: "completed",
},
{
id: 16,
fullName: "Mia Robinson 159 Cherry St Forestville, KY",
appointmentScheduled: "in progress",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
{
id: 17,
fullName: "Ethan Walker 456 Walnut Rd Meadowbrook, ND",
appointmentScheduled: "completed",
estimateSent: "completed",
paymentReceived: "in progress",
jobStatus: "in progress",
},
{
id: 18,
fullName: "Ava Hall 123 Poplar Ave Greenfield, MS",
appointmentScheduled: "not started",
estimateSent: "not started",
paymentReceived: "not started",
jobStatus: "not started",
},
];
static dummyJobData = [
{
jobId: "JOB001",
foreman: "Mike Thompson",
crew: ["Worker A", "Worker B"],
address: "123 Lane Dr, Cityville, MN",
customer: "John Doe",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "in progress" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB002",
foreman: null,
crew: [],
address: "456 Oak St, Townsville, CA",
customer: "Jane Smith",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "not started" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB003",
foreman: "Sarah Johnson",
crew: ["Worker C", "Worker D", "Worker E"],
address: "789 Pine Rd, Villagetown, TX",
customer: "Mike Johnson",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "in progress" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB004",
foreman: null,
crew: [],
address: "321 Maple Ave, Hamlet, FL",
customer: "Emily Davis",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "not started" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB005",
foreman: "David Martinez",
crew: ["Worker F", "Worker G"],
address: "654 Cedar Blvd, Borough, NY",
customer: "David Wilson",
overAllStatus: "completed",
completionDate: "2024-10-15",
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "completed" },
{ stepName: "Job Completed", status: "completed" },
],
},
{
jobId: "JOB006",
foreman: null,
crew: [],
address: "987 Birch Ln, Metropolis, IL",
customer: "Sarah Brown",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "in progress" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB007",
foreman: "Chris Wilson",
crew: ["Worker H", "Worker I"],
address: "159 Spruce Ct, Capital City, WA",
customer: "Chris Taylor",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "in progress" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB008",
foreman: null,
crew: [],
address: "753 Willow Dr, Smalltown, OH",
customer: "Amanda Martinez",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "not started" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB009",
foreman: "Lisa Anderson",
crew: ["Worker J"],
address: "852 Aspen Rd, Bigcity, NJ",
customer: "Joshua Anderson",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "in progress" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB010",
foreman: "Robert Thomas",
crew: ["Worker K", "Worker L", "Worker M"],
address: "147 Cypress St, Uptown, GA",
customer: "Olivia Thomas",
overAllStatus: "completed",
completionDate: "2024-10-20",
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "completed" },
{ stepName: "Job Completed", status: "completed" },
],
},
{
jobId: "JOB011",
foreman: null,
crew: [],
address: "369 Fir Ave, Downtown, MI",
customer: "Daniel Jackson",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "in progress" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB012",
foreman: "Maria White",
crew: ["Worker N", "Worker O"],
address: "258 Palm Blvd, Riverside, AZ",
customer: "Sophia White",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "in progress" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB013",
foreman: null,
crew: [],
address: "951 Olive Ln, Seaside, OR",
customer: "Matthew Harris",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "not started" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB014",
foreman: "James Clark",
crew: ["Worker P"],
address: "753 Magnolia Ct, Hilltown, SC",
customer: "Isabella Clark",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "in progress" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB015",
foreman: "Patricia Lewis",
crew: ["Worker Q", "Worker R", "Worker S"],
address: "357 Dogwood Dr, Lakeview, VT",
customer: "Andrew Lewis",
overAllStatus: "completed",
completionDate: "2024-10-18",
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "completed" },
{ stepName: "Job Completed", status: "completed" },
],
},
{
jobId: "JOB016",
foreman: null,
crew: [],
address: "159 Cherry St, Forestville, KY",
customer: "Mia Robinson",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "in progress" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB017",
foreman: "Kevin Walker",
crew: ["Worker T", "Worker U"],
address: "456 Walnut Rd, Meadowbrook, ND",
customer: "Ethan Walker",
overAllStatus: "in progress",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "completed" },
{ stepName: "Materials Received", status: "completed" },
{ stepName: "Permits", status: "completed" },
{ stepName: "Locate Utilities", status: "completed" },
{ stepName: "Foreman Assigned", status: "completed" },
{ stepName: "Crew Assigned", status: "completed" },
{ stepName: "Job Started", status: "in progress" },
{ stepName: "Job Completed", status: "not started" },
],
},
{
jobId: "JOB018",
foreman: null,
crew: [],
address: "123 Poplar Ave, Greenfield, MS",
customer: "Ava Hall",
overAllStatus: "not started",
completionDate: null,
steps: [
{ stepName: "Materials Ordered", status: "not started" },
{ stepName: "Materials Received", status: "not started" },
{ stepName: "Permits", status: "not started" },
{ stepName: "Locate Utilities", status: "not started" },
{ stepName: "Foreman Assigned", status: "not started" },
{ stepName: "Crew Assigned", status: "not started" },
{ stepName: "Job Started", status: "not started" },
{ stepName: "Job Completed", status: "not started" },
],
},
];
}