Final web app without save or print button.
import React, { useState } from ‘react’;
import { Card, CardHeader, CardTitle, CardContent } from ‘./components/ui/card’;
import { Input } from ‘./components/ui/input’;
import { Button } from ‘./components/ui/button’;
const ContractorsContact = () => {
const [jobAddress, setJobAddress] = useState(”);
const [taskItems, setTaskItems] = useState([
‘Lot’,
‘Lot Closing Cost’,
‘Blueprints’,
‘Exterminators Fee’,
‘Sewer Tap Fee’,
‘Perk Test’,
‘Septic Tank’,
‘Warranty -Startup’,
‘Temporary Electric Pole’,
‘Tractor Work/Site Clearing’,
‘Soil Testing Fee’,
‘Retainer Wall’,
‘Engineering Fees’,
‘Builders Risk Insurance’,
‘Foundation Engr Fee’,
‘Posttension Cables’,
‘Form board Survey’,
‘Sand and Dirt’,
‘Piers’,
‘Plumbing’,
‘Electric Floor Outlets’,
‘Concrete Pumping’,
‘Foundation’,
‘Flatwork’,
‘Lumber’,
‘Framers’,
‘Windows’,
‘Roof’,
‘A/C & Heat’,
‘Electrical’,
‘Telephone/Cable’,
‘Exterior Doors’,
‘Security System’,
‘Intercom System’,
‘Vacuum Cleaner System’,
‘Wall and Ceiling Insulation’,
‘Sheetrock’,
‘Tape Bed & Texture’,
‘Cabinets’,
‘Interior Doors & Trim’,
‘Trim Labor’,
‘Garage Doors’,
‘Brick & Mason’,
‘Stucco’,
‘Fireplace’,
‘Tile & Install’,
‘Interior/Exterior Paint’,
‘Kitchen Counter Tops’,
‘Tub and Vanity Tops’,
‘Lighting’,
‘Appliances’,
‘Mirrors/Shower Doors’,
‘Hardware’,
‘Carpet and Vinyl’,
‘Other Floor Coverings’,
‘Garage Door Opener’,
‘Wall Paper and Labor’,
‘Mini-Blinds’,
‘Gutters’,
‘Landscape’,
‘tree trimming and grinding’,
‘Hydro mulch or Sod’,
‘MAILBOX’,
‘Lockout Hardware’,
‘Exterior clean/Dumpster’,
‘Interior Cleaning’,
‘Final Grade’,
‘Fence’,
‘Survey’,
‘Temporary Utilities’,
‘Columns’,
‘Wood Deck’,
‘Swimming Pool’,
‘Hot Tub’,
‘Sprinkler System’,
‘French Drain’,
‘Title Policy’,
‘Portable Toilets’,
‘Welder’,
‘Pergola Installed’,
]);
const [contractorsNumbers, setContractorsNumbers] = useState({});
const [newTaskItem, setNewTaskItem] = useState(”);
const handleAddTaskItem = () => {
setTaskItems([…taskItems, newTaskItem]);
setNewTaskItem(”);
};
const handleAddContractorNumber = (taskItem) => {
setContractorsNumbers((prev) => ({ …prev, [taskItem]: ” }));
};
const handleUpdateContractorNumber = (taskItem, value) => {
setContractorsNumbers((prev) => ({ …prev, [taskItem]: value }));
};
return (
Contractor’s Contact
TASK | CONTRACTORS NUMBERS |
---|---|
{taskItem} | handleUpdateContractorNumber(taskItem, e.target.value)} className=”w-full h-full border-none focus:ring-0″ /> |
setNewTaskItem(e.target.value)} className=”w-full” /> |
);
};
export default ContractorsContact;