From 15a713ab441a99dc05fee6af900078cfab64c7b4 Mon Sep 17 00:00:00 2001
From: Izzatul Muttaqin <izzatul.muttaqin@gmail.com>
Date: Fri, 6 Dec 2019 20:15:42 +0700
Subject: [PATCH] Melakukan redesign untuk memberikan UX lebih baik dengan
 fitur tab

---
 assets/js/ProfilePage.jsx | 1071 +++++++++++++++++--------------------
 1 file changed, 490 insertions(+), 581 deletions(-)

diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx
index 3ff6454..2ae098b 100755
--- a/assets/js/ProfilePage.jsx
+++ b/assets/js/ProfilePage.jsx
@@ -10,6 +10,7 @@ import {
   Form,
   Grid,
   Message,
+  Tab
 } from 'semantic-ui-react';
 import Server from './lib/Server';
 import Storage from './lib/Storage';
@@ -289,286 +290,514 @@ export default class ProfilePage extends ProfileHandler {
   gotoStudentTranscript = () => gotoLink(`transkrip/${this.state.id}`);
 
   render() {
-    const sertifikat_exists = this.state.sertifikat;
-    let sertifikat_state;
-    if (sertifikat_exists == '') {
-      sertifikat_state = <p>Sertifikat belum ada</p>;
-    } else {
-      sertifikat_state = <p>Sertifikat sudah ada</p>;
-    }
-    const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
-    return (
-      <div className="profilePage">
-        <Segment className="biodata-section">
-          <Grid stackable columns={2}>
-            <Grid.Column>
-              <Header as="h2" icon textAlign="center">
-                <br />
-                <Image src={this.state.photo || defaultPicture} size="medium" />
-              </Header>
-            </Grid.Column>
-
-            <Grid.Column>
-              <Container textAlign="left" className="profile-biodata">
-                <div className="biodata">
-                  <Segment basic textAlign="center">
-                    <h1>
-                      {' '}
-                      {this.state.name}
-                      {' '}
-                    </h1>
-                  </Segment>
-
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="university" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.major || 'N/A'}
-                          ,
-                          {' '}
-                          {this.state.batch || 'N/A'}
+    const detailTab = [
+      {
+        menuItem: 'Experience', render: () =>
+          <Tab.Pane>
+            <Grid stackable>
+              <Grid.Column width={6}>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="suitcase" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        Latest working experience as:
                           {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="mail" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
+                        <span>
+                          <b>
+                            {' '}
+                            {this.state.latest_work || 'N/A'}
+                            {' '}
+                          </b>
+                        </span>
+                      </p>
+                      <p>
+                        Description:
                           {' '}
-                          {this.state.email || 'N/A'}
+                        <span>
                           {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="phone" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
+                          {this.state.latest_work_desc || 'N/A'}
                           {' '}
-                          {this.state.phone_number || 'Nomor Telepon belum ditambahkan'}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                        </span>
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="venus mars" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.gender || 'Gender belum ditambahkan'}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="trophy" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.awards || 'Awards belum ditambahkan'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="trophy" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      {sertifikat_state}
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="folder open" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.projects
+                          || 'Projects belum ditambahkan'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="hand peace outline" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.volunteer || 'N/A'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="gift" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.cityOfBirth || 'N/A'}
-                          ,
-                          {' '}
-                          {this.state.dateOfBirth || 'N/A'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="slideshare" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.seminar
+                          || 'Seminar dan Training kosong'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+              </Grid.Column>
+            </Grid>
+          </Tab.Pane>
+      },
+      {
+        menuItem: 'Skills',
+        render: () =>
+          <Tab.Pane>
+            <Grid stackable>
+              <Grid.Column width={6}>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="cogs" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.skills || 'Skills belum ditambahkan'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="comment" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.languages || 'N/A'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="certificate" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p>
+                        {' '}
+                        {this.state.certification || 'N/A'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="pencil alternate" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p href={this.state.student_toefl}>
+                        {' '}
+                        {this.state.student_toefl || 'N/A'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="pencil alternate" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p href={this.state.ielts}>
+                        {' '}
+                        {this.state.ielts || 'N/A'}
+                        {' '}
+                      </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+              </Grid.Column>
+            </Grid>
+          </Tab.Pane>
+      },
+      {
+        menuItem: 'Links',
+        render: () =>
+          <Tab.Pane>
+            <Grid stackable>
+              <Grid.Column width={6}>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="linkify" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <a href={this.state.portfolio_link}>
+                        {' '}
+                        {this.state.portfolio_link || 'Portofolio belum ditambahkan'}
+                        {' '}
+                      </a>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="user" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.self_description || 'N/A'}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="linkedin" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <a href={this.state.linkedin_url}>
+                        {' '}
+                        {this.state.linkedin_url || 'N/A'}
+                        {' '}
+                      </a>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="pencil alternate" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p href={this.state.student_gpa}>
-                          {' '}
-                          {this.state.student_gpa || 'null'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="hackerrank" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <a href={this.state.hackerrank_url}>
+                        {' '}
+                        {this.state.hackerrank_url || 'N/A'}
+                        {' '}
+                      </a>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="child" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <a href={this.state.dependants}>
-                          {' '}
-                          {this.state.dependants || 'N/A'}
-                          {' '}
-                        </a>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-                </div>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="globe" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <a href={this.state.website_url}>
+                        {' '}
+                        {this.state.website_url || 'N/A'}
+                        {' '}
+                      </a>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
 
                 <Segment basic vertical>
                   <Grid>
                     <Grid.Column width={2}>
-                      <Icon name="address book" size="big" />
+                      <Icon name="github" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      {this.state.github_url ? (
+                        <a href={this.state.github_url}>
+                          {' '}
+                          {this.state.github_url}
+                          {' '}
+                        </a>
+                      ) : (
+                          <p> N/A </p>
+                        )}
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+                <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="gitlab" size="big" />
                     </Grid.Column>
                     <Grid.Column width={13}>
-                      <p>
-                        {' '}
-                        {this.state.alamat || 'N/A'}
-                        {' '}
-                      </p>
+                      {
+                        this.state.gitlab_url
+                          ? (
+                            <a href={this.state.gitlab_url}>
+                              {' '}
+                              {this.state.gitlab_url}
+                              {' '}
+                            </a>
+                          )
+                          : <p> N/A </p>
+                      }
                     </Grid.Column>
                   </Grid>
                 </Segment>
-
-                <Segment basic vertical>
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="map pin" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.region || 'N/A'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="money bill alternate" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.expected_salary || 'N/A'}
+              </Grid.Column>
+            </Grid>
+          </Tab.Pane>
+      },
+      {
+        menuItem: 'Other',
+        render: () =>
+          <Tab.Pane>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="venus mars" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.gender || 'Gender belum ditambahkan'}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="gift" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.cityOfBirth || 'N/A'}
+                    ,
                           {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+                    {this.state.dateOfBirth || 'N/A'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="address book" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.alamat || 'Alamat belum dimasukkan'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="hand peace outline" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.volunteer || 'N/A'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="trophy" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.awards || 'Awards belum ditambahkan'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="map pin" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.region || 'Provinsi belum dimasukkan'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="child" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <a href={this.state.dependants}>
+                    {' '}
+                    {this.state.dependants || 'Tidak ada tanggungan'}
+                    {' '}
+                  </a>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="money bill alternate" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.expected_salary || 'Belum ada Expected Salary'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="map pin" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.region || 'N/A'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="time" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {`${this.state.age} years` || 'N/A'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="lightbulb" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.interests
+                      || 'Interests belum ditambahkan'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <Icon name="book" size="big" />
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.related_course || 'Related Course belum ditambahkan'}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+            <Segment basic vertical>
+              <Grid>
+                <Grid.Column width={2}>
+                  <h3 className="lastSeen">Last Seen</h3>
+                </Grid.Column>
+                <Grid.Column width={13}>
+                  <p>
+                    {' '}
+                    {this.state.lastLoggedIn}
+                    {' '}
+                  </p>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+          </Tab.Pane>
+      }
+    ]
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="certificate" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        { sertifikat_state }
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
+    const sertifikat_exists = this.state.sertifikat;
+    let sertifikat_state;
+    if (sertifikat_exists == '') {
+      sertifikat_state = <p>Sertifikat belum ada</p>;
+    } else {
+      sertifikat_state = <p>Sertifikat sudah ada</p>;
+    }
+    const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
+    return (
+      <div className="profilePage">
+        <Segment className="biodata-section">
+          <Grid stackable columns={2}>
+            <Grid.Column>
+              <Header as="h2" icon textAlign="center">
+                <br />
+                <Image src={this.state.photo || defaultPicture} size="medium" />
+              </Header>
+            </Grid.Column>
 
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="folder open" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.projects
-                            || 'Projects belum ditambahkan'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
+            <Grid.Column>
+              <Container textAlign="left" className="profile-biodata">
+                <div className="biodata">
+                  <Segment basic textAlign="center">
+                    <h1>
+                      {' '}
+                      {this.state.name}
+                      {' '}
+                    </h1>
                   </Segment>
 
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="certificate" size="big" />
+                        <Icon name="university" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
                         <p>
                           {' '}
-                          {this.state.certification || 'N/A'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="comment" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
+                          {this.state.major || 'N/A'}
+                          ,
                           {' '}
-                          {this.state.languages || 'N/A'}
+                          {this.state.batch || 'N/A'}
                           {' '}
                         </p>
                       </Grid.Column>
@@ -578,13 +807,12 @@ export default class ProfilePage extends ProfileHandler {
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="slideshare" size="big" />
+                        <Icon name="mail" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
                         <p>
                           {' '}
-                          {this.state.seminar
-                            || 'Seminar dan Training kosong'}
+                          {this.state.email || 'N/A'}
                           {' '}
                         </p>
                       </Grid.Column>
@@ -594,76 +822,46 @@ export default class ProfilePage extends ProfileHandler {
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="lightbulb" size="big" />
-                      </Grid.Column>
-                      <Grid.Column width={13}>
-                        <p>
-                          {' '}
-                          {this.state.interests
-                            || 'Interests belum ditambahkan'}
-                          {' '}
-                        </p>
-                      </Grid.Column>
-                    </Grid>
-                  </Segment>
-                  <Segment basic vertical>
-                    <Grid>
-                      <Grid.Column width={2}>
-                        <Icon name="book" size="big" />
+                        <Icon name="phone" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
                         <p>
                           {' '}
-                          {this.state.related_course || 'Related Course belum ditambahkan'}
-                          {' '}
+                          {this.state.phone_number || 'Nomor Telepon belum ditambahkan'}
                         </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
+
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <h3 className="lastSeen">Last Seen</h3>
+                        <Icon name="user" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
                         <p>
                           {' '}
-                          {this.state.lastLoggedIn}
-                          {' '}
+                          {this.state.self_description || 'Belum ada deskripsi diri'}
                         </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
+
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="time" size="big" />
+                        <Icon name="pencil alternate" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p>
+                        <p href={this.state.student_gpa}>
                           {' '}
-                          {`${this.state.age} years` || 'N/A'}
+                          {("GPA :" + this.state.student_gpa) || 'Nilai GPA belum dimasukkan'}
                           {' '}
                         </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
-                </Segment>
-
-                <Segment basic vertical>
-                  <Grid>
-                    <Grid.Column width={2}>
-                      <Icon name="map pin" size="big" />
-                    </Grid.Column>
-                    <Grid.Column width={13}>
-                      <p>
-                        {' '}
-                        {this.state.region || 'N/A'}
-                        {' '}
-                      </p>
-                    </Grid.Column>
-                  </Grid>
-                </Segment>
+                </div>
 
                 <Segment basic vertical>
                   <Grid>
@@ -764,298 +962,9 @@ export default class ProfilePage extends ProfileHandler {
           </div>
         </Segment>
 
-        <Segment className="experiences-form">
-          <h3>Experience</h3>
-          <Grid stackable>
-            <Grid.Column width={6}>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="suitcase" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      Latest working experience as:
-                          {' '}
-                      <span>
-                        <b>
-                          {' '}
-                          {this.state.latest_work || 'N/A'}
-                          {' '}
-                        </b>
-                      </span>
-                    </p>
-                    <p>
-                      Description:
-                          {' '}
-                      <span>
-                        {' '}
-                        {this.state.latest_work_desc || 'N/A'}
-                        {' '}
-                      </span>
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="trophy" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.awards || 'Awards belum ditambahkan'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="trophy" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    {sertifikat_state}
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="folder open" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.projects
-                        || 'Projects belum ditambahkan'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="hand peace outline" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.volunteer || 'N/A'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="slideshare" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.seminar
-                        || 'Seminar dan Training kosong'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-            </Grid.Column>
-          </Grid>
-        </Segment>
-
-        <Segment className="skills-form">
-          <h3>Skills</h3>
-          <Grid stackable>
-            <Grid.Column width={6}>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="cogs" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.skills || 'Skills belum ditambahkan'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="comment" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.languages || 'N/A'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="certificate" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p>
-                      {' '}
-                      {this.state.certification || 'N/A'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="pencil alternate" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p href={this.state.student_toefl}>
-                      {' '}
-                      {this.state.student_toefl || 'N/A'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="pencil alternate" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <p href={this.state.ielts}>
-                      {' '}
-                      {this.state.ielts || 'N/A'}
-                      {' '}
-                    </p>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-            </Grid.Column>
-          </Grid>
-        </Segment>
-
-        <Segment className="links-form">
-          <h3>Links</h3>
-          <Grid stackable>
-            <Grid.Column width={6}>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="linkify" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <a href={this.state.portfolio_link}>
-                      {' '}
-                      {this.state.portfolio_link || 'Portofolio belum ditambahkan'}
-                      {' '}
-                    </a>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="linkedin" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <a href={this.state.linkedin_url}>
-                      {' '}
-                      {this.state.linkedin_url || 'N/A'}
-                      {' '}
-                    </a>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="hackerrank" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <a href={this.state.hackerrank_url}>
-                      {' '}
-                      {this.state.hackerrank_url || 'N/A'}
-                      {' '}
-                    </a>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="globe" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    <a href={this.state.website_url}>
-                      {' '}
-                      {this.state.website_url || 'N/A'}
-                      {' '}
-                    </a>
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="github" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    {this.state.github_url ? (
-                      <a href={this.state.github_url}>
-                        {' '}
-                        {this.state.github_url}
-                        {' '}
-                      </a>
-                    ) : (
-                        <p> N/A </p>
-                      )}
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-              <Segment basic vertical>
-                <Grid>
-                  <Grid.Column width={2}>
-                    <Icon name="gitlab" size="big" />
-                  </Grid.Column>
-                  <Grid.Column width={13}>
-                    {
-                      this.state.gitlab_url
-                        ? (
-                          <a href={this.state.gitlab_url}>
-                            {' '}
-                            {this.state.gitlab_url}
-                            {' '}
-                          </a>
-                        )
-                        : <p> N/A </p>
-                    }
-                  </Grid.Column>
-                </Grid>
-              </Segment>
-            </Grid.Column>
-          </Grid>
+        <Segment>
+          <Tab panes={detailTab} />
         </Segment>
-
-        {/* { this.updateForm(this.props.route.own) } */}
       </div >
     );
   }
-- 
GitLab