Browse Source

changed styling form proyek

pull/2/head
wahyuun 1 year ago
parent
commit
58ca6e4b74
  1. 148
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js

148
src/views/SimproV2/CreatedProyek/DialogFormProyek.js

@ -200,6 +200,7 @@ const DialogFormProyek = ({
setFinance(""); setFinance("");
setWorkArea(""); setWorkArea("");
setProjectDuration(""); setProjectDuration("");
setDivisiProject(null);
setProjectStructureOrg(null); setProjectStructureOrg(null);
setCompany(""); setCompany("");
setCurrency(""); setCurrency("");
@ -611,7 +612,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize"> <Label className="capitalize" style={{ fontWeight: "bold" }}>
Project Name<span style={{ color: "red" }}>*</span> Project Name<span style={{ color: "red" }}>*</span>
</Label> </Label>
<Input <Input
@ -623,7 +624,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Code / Short Name<span style={{ color: "red" }}>*</span></Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Code / Short Name<span style={{ color: "red" }}>*</span></Label>
<Input <Input
type="text" type="text"
value={shortName} value={shortName}
@ -635,7 +636,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize"> <Label className="capitalize" style={{ fontWeight: "bold" }}>
Project Type<span style={{ color: "red" }}>*</span> Project Type<span style={{ color: "red" }}>*</span>
</Label> </Label>
<Select <Select
@ -658,7 +659,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">PM</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>PM</Label>
<Select <Select
showSearch showSearch
filterOption={(inputValue, option) => filterOption={(inputValue, option) =>
@ -681,7 +682,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize"> <Label className="capitalize" style={{ fontWeight: "bold" }}>
Start Date<span style={{ color: "red" }}>*</span> Start Date<span style={{ color: "red" }}>*</span>
</Label> </Label>
<DatePicker <DatePicker
@ -694,7 +695,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize"> <Label className="capitalize" style={{ fontWeight: "bold" }}>
End Date<span style={{ color: "red" }}>*</span> End Date<span style={{ color: "red" }}>*</span>
</Label> </Label>
<DatePicker <DatePicker
@ -716,7 +717,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Work Area</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Work Area</Label>
<Input <Input
type="text" type="text"
value={workArea} value={workArea}
@ -726,7 +727,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Company</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Company</Label>
<Input <Input
type="text" type="text"
value={company} value={company}
@ -738,7 +739,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize"> <Label className="capitalize" style={{ fontWeight: "bold" }}>
Budget<span style={{ color: "red" }}>*</span> Budget<span style={{ color: "red" }}>*</span>
</Label> </Label>
<Row> <Row>
@ -768,8 +769,14 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label>Handled By Division</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>
Handled By Division<span style={{ color: "red" }}>*</span>
</Label>
<Select <Select
showSearch
filterOption={(inputValue, option) =>
option.children.toLowerCase().includes(inputValue.toLowerCase())
}
value={divisiProject} value={divisiProject}
defaultValue={divisiProject} defaultValue={divisiProject}
onChange={onChangeDivisiProject} onChange={onChangeDivisiProject}
@ -785,7 +792,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Project Duration</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Project Duration</Label>
<Input <Input
type="number" type="number"
min="1" min="1"
@ -798,7 +805,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Organizational Structure</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Organizational Structure</Label>
<Input <Input
type="file" type="file"
accept="image/*" accept="image/*"
@ -809,7 +816,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Description</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Description</Label>
<Input <Input
type="textarea" type="textarea"
value={description} value={description}
@ -820,7 +827,7 @@ const DialogFormProyek = ({
</Row> </Row>
<Row> <Row>
<Col md={12}> <Col md={12}>
<Label className="capitalize">Late Consequence</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Late Consequence</Label>
<CKEditor <CKEditor
editor={ ClassicEditor } editor={ ClassicEditor }
data={ late } data={ late }
@ -832,9 +839,9 @@ const DialogFormProyek = ({
/> />
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop: "20px"}}>
<Col md={12}> <Col md={12}>
<Label className="capitalize">Assumtion</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Assumtion</Label>
<CKEditor <CKEditor
editor={ClassicEditor} editor={ClassicEditor}
data={assumtion} data={assumtion}
@ -846,18 +853,18 @@ const DialogFormProyek = ({
/> />
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop: "20px"}}>
<Col md={12}> <Col md={12}>
<Label className="capitalize">Project Checklist</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Project Checklist</Label>
<Row> <Row>
<Col md={5}> <Col md={5}>
<b>Item</b> <p>Item</p>
</Col> </Col>
<Col md={4}> <Col md={4}>
<b>Availability</b> <p>Availability</p>
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Tooltip title="Add row"> <Tooltip title="Add row">
@ -877,16 +884,16 @@ const DialogFormProyek = ({
<Divider orientation="left" plain></Divider> <Divider orientation="left" plain></Divider>
<Row> <Row>
<Col md={12}> <Col md={12}>
<Label className="capitalize">Issues & Obstacles</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Issues & Obstacles</Label>
<Row> <Row>
<Col md={5}> <Col md={5}>
<b>Issu Level</b> <p>Issue Level</p>
</Col> </Col>
<Col md={4}> <Col md={4}>
<b>Description</b> <p>Description</p>
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Tooltip title="Add row"> <Tooltip title="Add row">
@ -909,7 +916,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label>Phase</Label> <Label style={{ fontWeight: "bold" }}>Phase</Label>
<Select <Select
value={phaseProject} value={phaseProject}
defaultValue={phaseProject} defaultValue={phaseProject}
@ -926,7 +933,7 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label>Cost Health</Label> <Label style={{ fontWeight: "bold" }}>Cost Health</Label>
<Select <Select
value={budgetHealth} value={budgetHealth}
defaultValue={budgetHealth} defaultValue={budgetHealth}
@ -954,47 +961,47 @@ const DialogFormProyek = ({
<b>Project Objectives</b> <b>Project Objectives</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<FormGroup> <CKEditor
<Input editor={ClassicEditor}
type="textarea" data={objectives}
value={objectives} config={editorConfig}
onChange={(e) => setObjectives(e.target.value)} onChange={ ( event, editor ) => {
const data = editor.getData();
setObjectives(data);
} }
/> />
</FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop: "20px" }}>
<Col md={3}> <Col md={3}>
<b>Project is considered successful when</b> <b>Project is considered successful when</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<FormGroup> <CKEditor
<Input editor={ClassicEditor}
type="textarea" data={projectIsConsideredSuccessful}
value={projectIsConsideredSuccessful} config={editorConfig}
onChange={(e) => onChange={ ( event, editor ) => {
setProjectIsConsideredSuccessful(e.target.value) const data = editor.getData();
} setProjectIsConsideredSuccessful(data);
placeholder={`List of indicators`} } }
rows={5}
/> />
</FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop:"20px" }}>
<Col md={3}> <Col md={3}>
<b>Project Participants</b> <b>Project Participants</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<Row> <Row>
<Col md={5}> <Col md={5}>
<b>Title</b> <p>Title</p>
</Col> </Col>
<Col md={4}> <Col md={4}>
<b>Name</b> <p>Name</p>
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Tooltip title="Add row"> <Tooltip title="Add row">
@ -1011,35 +1018,36 @@ const DialogFormProyek = ({
<div style={{ marginBottom: 50 }}>{RenderParticipants()}</div> <div style={{ marginBottom: 50 }}>{RenderParticipants()}</div>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop:"20px" }}>
<Col md={3}> <Col md={3}>
<b>Testing Environment</b> <b>Testing Environment</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<FormGroup> <CKEditor
<Input editor={ClassicEditor}
type="textarea" data={testingEnv}
value={testingEnv} config={editorConfig}
onChange={(e) => setTestingEnv(e.target.value)} onChange={ ( event, editor ) => {
rows={5} const data = editor.getData();
setTestingEnv(data);
} }
/> />
</FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop:"20px" }}>
<Col md={3}> <Col md={3}>
<b>Milestones</b> <b>Milestones</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<b>Status</b> <p>Status</p>
</Col> </Col>
<Col md={4}> <Col md={4}>
<b>Deadline</b> <p>Deadline</p>
</Col> </Col>
<Col md={3}> <Col md={3}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Tooltip title="Add row"> <Tooltip title="Add row">
@ -1056,23 +1064,23 @@ const DialogFormProyek = ({
<div style={{ marginBottom: 50 }}>{RenderMilestones()}</div> <div style={{ marginBottom: 50 }}>{RenderMilestones()}</div>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop:"20px" }}>
<Col md={3}> <Col md={3}>
<b>Potential Risk</b> <b>Potential Risk</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Risk Level</b> <p>Risk Level</p>
</Col> </Col>
<Col md={3}> <Col md={3}>
<b>Description</b> <p>Description</p>
</Col> </Col>
<Col md={3}> <Col md={3}>
<b>Prevention</b> <p>Prevention</p>
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Tooltip title="Add row"> <Tooltip title="Add row">
@ -1089,23 +1097,23 @@ const DialogFormProyek = ({
<div style={{ marginBottom: 50 }}>{RenderRisk()}</div> <div style={{ marginBottom: 50 }}>{RenderRisk()}</div>
</Col> </Col>
</Row> </Row>
<Row> <Row style={{ marginTop:"20px" }}>
<Col md={3}> <Col md={3}>
<b>Approval</b> <b>Approval</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Title</b> <p>Title</p>
</Col> </Col>
<Col md={3}> <Col md={3}>
<b>Name</b> <p>Name</p>
</Col> </Col>
<Col md={3}> <Col md={3}>
<b>Date</b> <p>Date</p>
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <p>Action</p>
</Col> </Col>
<Tooltip title="Add row"> <Tooltip title="Add row">
<Col md={1}> <Col md={1}>

Loading…
Cancel
Save