Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
5 views7 pages

Const Createjob

The document provides a React component for creating a job form that includes fields for job ID, manual job number, product details (brand and IMEI), warranty information, dealer and customer details, complaint nature, physical condition, received items, notes, and service engineer selection. It also includes functionality for image uploads and form submission. Additionally, it outlines a simpler form for entering job number, brand, and notes with a submit button.

Uploaded by

sixthbit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views7 pages

Const Createjob

The document provides a React component for creating a job form that includes fields for job ID, manual job number, product details (brand and IMEI), warranty information, dealer and customer details, complaint nature, physical condition, received items, notes, and service engineer selection. It also includes functionality for image uploads and form submission. Additionally, it outlines a simpler form for entering job number, brand, and notes with a submit button.

Uploaded by

sixthbit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

const createJob = () => {

const values = Object.values(Brand);

if (showCreatejob) {
return (
<div className="flex flex-col">
<p><b>Create New Job</b></p> <br/>
<label>JOB ID : &nbsp;{jobid}</label>
<br/>

<label>Manual Job Number : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="manualcode"
id="manualcode"
required
value={manualjobcode}
onChange={(e) => setManualjobcode(e.target.value)}
/>
<br></br>

<label><b>Product Details</b></label>
<br/>
<label>Brand : &nbsp;</label>
<select
name="inventoryType"
className="border-b-[1px] px-4 py-2 w-1/4"
value={brand}
onChange={(e) => {
setBrand(e.target.value);
console.log("Brand ",e.target.value);
}}
>
{values.map((item, index) => (
<option>{item}</option>
))}
</select>
<br></br>

{brand == "KIESLECT" && (


<div>
<label>Serial No : </label>&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="imei1"
id="imei1"
required
value={imei}
onChange={(e) => setImei(String(e.target.value))}
/> &nbsp; &nbsp; </div>
)}

{brand != "KIESLECT" && (


<div>
<label>IMEI : </label>&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="imei1"
id="imei1"
required
value={imei}
onChange={(e) => setImei(Number(e.target.value))}
/> &nbsp; &nbsp;</div>
)}

<button className="transition-transform transform active:scale-


95 float-right bg-blue-500 rounded text-white py-1 px-4"
onClick={getDataPoova}>Get Phone Data / Warranty Data</button>
<br></br>
{viewGetDataPoova()}
<label>Previous Jobs : </label>&nbsp;
<br/>
<textarea disabled={true} value={getPrvJobValues()}
name="Text133"
cols={50} rows={4}></textarea>

<label>Warranty : </label>

&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="warranty"
id="warranty"
required
value={warrenty}
onChange={(e) => setWarrenty(e.target.value)}
/> &nbsp; &nbsp;

<br/>
<label>Warranty Notes : </label>&nbsp;<br></br>
<textarea value={warrentyNote} onChange={(e) =>
setWarrentyNote(e.target.value)} name="Text54"
cols={50} rows={4}></textarea>
<br></br>

<label>Dealer Name : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="dealername"
id="dealername"
required
value={dealerName}
onChange={(e) => setDealerName(e.target.value)}
/>
<br></br>

<label>Dealer Address : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="dealeraddress"
id="dealeraddress"
required
value={dealerAddress}
onChange={(e) => setDealerAddress(e.target.value)}
/>
<br></br>

<label>Dealer Contact : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="dealercontact"
id="dealercontact"
required
value={dealerContact}
onChange={(e) => setDealerContact(e.target.value)}
/>
<br></br>

<label>Customer Handover : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="date"
name="cusHandover"
id="cusHandover"
required
value={cusHandover}
onChange={(e) => setCusHandover(e.target.value)}
/>
<br></br>

<label>Item Received On : </label>&nbsp;


<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="date"
name="itemreceivedOn"
id="itemreceivedOn"
required
value={itemReceivedOn}
onChange={(e) => setItemReceivedOn(e.target.value)}
/>
<br></br>

<label><b>Customer Details</b></label>
<br/>
<label>Customer Name : </label>&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="name"
id="name"
required
value={cusName}
onChange={(e) => setCusName(e.target.value)}
/>
<br></br>
<label>Customer Telephone : </label>&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="telephone"
id="telephone"
required
value={cusNumber}
onChange={(e) => setCusNumber(e.target.value)}
/>
<br></br>
<label>Customer Address : </label>&nbsp;
<input
className="border-b-[1px] px-4 py-2 w-1/4 rounded"
type="text"
name="address"
id="address"
required
value={cusAddress}
onChange={(e) => setCusAddress(e.target.value)}
/>
<br></br>
<label>Nature of the complaint as reported by the customer :
</label>&nbsp;
{selectItem(faults, fault, setFault, cusComplaint,
setCusComplaint)}
<textarea value={cusComplaint} onChange={(e) =>
setCusComplaint(e.target.value)} name="Text1"
cols={50} rows={4}></textarea>
<br></br>

<label>Physical condition of the phone when received :


</label>&nbsp;
{selectItem(pConditions, selCondition, setSelCondition,
condition, setCondition)}
<textarea value={condition} onChange={(e) =>
setCondition(e.target.value)} name="Text2"
cols={50} rows={4}></textarea>
<br></br>

<label>Received items : </label>&nbsp;


{selectItem(receivedItemsList, selRecvdItem, setSelRecvdItem,
recvdItems, setRecvdItems)}
<textarea value={recvdItems} onChange={(e) =>
setRecvdItems(e.target.value)} name="Text3"
cols={50} rows={4}></textarea>
<br></br>

<label>Notes : </label>&nbsp;<br></br>
<textarea value={notes} onChange={(e) =>
setNotes(e.target.value)} name="Text3"
cols={50} rows={4}></textarea>
<br></br>

<label><b>Service Engineer</b></label> <br></br>


<label>Select Engineer</label> &nbsp;
<select
name="selectegineer"
className="border-b-[1px] px-4 py-2 w-1/4"
value={engineer}
onChange={(e) => {
if (e.target.value) {
setEngineer(e.target.value);
setEngineerObj(JSON.parse(e.target.value));
}
}}
>
<option></option>
{engineers.map((item: any) => (
<option value={JSON.stringify(item)}
key={item.id}>{item.username} -
Jobs {item.jobs}</option>
))}
</select>

<br/> <br/>

<div>
<h1><b>Upload Images</b></h1>
{uploadProgress && (<p>Uploading... </p>)}
<br/>
<ImageUploader setURLs={pushPhotoUrl}
setProgress={setUploadProgress}/>
<br/>
</div>
{uploadProgress && (
<p>Uploading...</p>
)}
<button disabled={uploadProgress} onClick={submitJob}
className="transition-transform transform active:scale-
95 bg-blue-500 rounded text-white py-1 px-4">Submit
</button>
&nbsp;&nbsp;
<button onClick={resetJob}
className="transition-transform transform active:scale-
95 bg-blue-500 rounded text-white py-1 px-4">Cancel
</button>

</div>
);
}
}

-----------------------------------

import { useState } from 'react';

export default function JobForm() {


const [formData, setFormData] = useState({
jobNumber: '',
brand: 'Sony',
notes: '',
});

const handleChange = (e) => {


const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};

const handleSubmit = (e) => {


e.preventDefault();
console.log('Form Data Submitted:', formData);
};

return (
<div className="max-w-md mx-auto mt-10 p-4 border rounded-lg shadow-lg">
<h2 className="text-xl font-semibold mb-6">Enter Job Details</h2>
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label className="block font-medium">Job Number:</label>
<input
type="text"
name="jobNumber"
value={formData.jobNumber}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>

<div className="mb-6">
<label className="block font-medium">Brand:</label>
<select
name="brand"
value={formData.brand}
onChange={handleChange}
className="w-full p-2 border rounded"
>
<option value="Sony">Sony</option>
<option value="Nokia">Nokia</option>
<option value="Apple">Apple</option>
</select>
</div>

<div className="mb-6">
<label className="block font-medium">Notes:</label>
<textarea
name="notes"
value={formData.notes}
onChange={handleChange}
className="w-full p-2 border rounded"
/>
</div>

<button
type="submit"
className="w-full p-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
Submit
</button>
</form>
</div>
);
}

create a nextjs page that allows the user to enter following data,
job number - an input box,
brand - a select box with items Sony, Nokia, Apple,
notes - a text area box,
a submit button

You might also like