From 460700cee5375a13a7969d6c3a1ab00140cf9167 Mon Sep 17 00:00:00 2001
From: wayangalihpratama <wgprtm@gmail.com>
Date: Mon, 6 Jan 2025 13:35:41 +0800
Subject: [PATCH] [#383] Load cases data in new case page

---
 frontend/src/App.scss                         | 14 ++++-
 .../src/components/layout/ContentLayout.js    | 51 ++++++++++++-------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 591c96f8..7728d353 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -47,6 +47,13 @@
     color: #ffffff !important;
     font-weight: 700;
   }
+
+  .button-ghost {
+    background: transparent;
+    border-radius: 20px;
+    border-color: #000;
+    font-weight: 700;
+  }
   // EOL global css setting
 
   header {
@@ -183,12 +190,17 @@
           color: #8c8c8c;
         }
 
-        .title {
+        .title-wrapper {
           padding: 0 $default-padding-size;
+          padding-top: 14px;
+        }
+
+        .title {
           font-family: "TabletGothicBold";
           font-size: 1.5rem;
           font-weight: 600;
           padding-top: 4px;
+          color: $primary-color;
         }
 
         .subTitle {
diff --git a/frontend/src/components/layout/ContentLayout.js b/frontend/src/components/layout/ContentLayout.js
index c8f2d1d7..079b9d04 100644
--- a/frontend/src/components/layout/ContentLayout.js
+++ b/frontend/src/components/layout/ContentLayout.js
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { Breadcrumb, Card, Tabs, Affix } from "antd";
+import { Breadcrumb, Card, Tabs, Affix, Row, Col } from "antd";
 import { HomeOutlined, RightOutlined } from "@ant-design/icons";
 import { adminRole } from "../../store/static";
 import { UserState } from "../../store";
@@ -33,6 +33,7 @@ const ContentLayout = ({
   title = null,
   subTitle = null,
   breadcrumbRightContent = null,
+  titleRighContent = null,
 }) => {
   const navigate = useNavigate();
   const hasBreadcrumb = breadcrumbItems.length;
@@ -87,24 +88,36 @@ const ContentLayout = ({
           ) : (
             ""
           )}
-          {title ? (
-            <div
-              data-testid="title"
-              className="title"
-              style={{ paddingTop: "14px" }}
-            >
-              {title}
-            </div>
-          ) : (
-            ""
-          )}
-          {subTitle ? (
-            <div data-testid="subTitle" className="subTitle">
-              {subTitle}
-            </div>
-          ) : (
-            ""
-          )}
+          <Row
+            gutter={[12, 12]}
+            align="middle"
+            justify="start"
+            className="title-wrapper"
+          >
+            <Col span={titleRighContent ? 6 : 24}>
+              {title ? (
+                <div data-testid="title" className="title">
+                  {title}
+                </div>
+              ) : (
+                ""
+              )}
+              {subTitle ? (
+                <div data-testid="subTitle" className="subTitle">
+                  {subTitle}
+                </div>
+              ) : (
+                ""
+              )}
+            </Col>
+            {titleRighContent && (
+              <Col span={18}>
+                <Row justify="end">
+                  <Col>{titleRighContent}</Col>
+                </Row>
+              </Col>
+            )}
+          </Row>
           {adminRole.includes(userRole) &&
           currentPath.includes("/admin/") &&
           showTabItemsForPath.includes(window.location.pathname) ? (