From edf20050db9670d2a29b1be3e359d992008fc3b8 Mon Sep 17 00:00:00 2001
From: Rafiafrzl <mrafiafrizal0@gmail.com>
Date: Tue, 2 Dec 2025 14:05:35 +0700
Subject: [PATCH] feat: hide tabs and improve UI elements

---
 src/pages/contact/component/DetailContact.jsx |  5 +-
 src/pages/contact/component/ListContact.jsx   | 92 +++++++++++++++----
 2 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/src/pages/contact/component/DetailContact.jsx b/src/pages/contact/component/DetailContact.jsx
index 3b6b873..d682381 100644
--- a/src/pages/contact/component/DetailContact.jsx
+++ b/src/pages/contact/component/DetailContact.jsx
@@ -251,7 +251,8 @@ const DetailContact = memo(function DetailContact(props) {
                         style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
                     />
                 </div>
-                <div style={{ marginBottom: 12 }}>
+                {/* Contact Type */}
+                {/* <div style={{ marginBottom: 12 }}>
                     <Text strong>Contact Type</Text>
                     <Text style={{ color: 'red' }}> *</Text>
                     <Select
@@ -264,7 +265,7 @@ const DetailContact = memo(function DetailContact(props) {
                         <Select.Option value="operator">Operator</Select.Option>
                         <Select.Option value="gudang">Gudang</Select.Option>
                     </Select>
-                </div>
+                </div> */}
             </div>
         </Modal>
     );
diff --git a/src/pages/contact/component/ListContact.jsx b/src/pages/contact/component/ListContact.jsx
index 936361d..84ab232 100644
--- a/src/pages/contact/component/ListContact.jsx
+++ b/src/pages/contact/component/ListContact.jsx
@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Row, Col, Input, Tabs, Space, ConfigProvider, Card, Tag } from 'antd';
+import { Button, Row, Col, Input, Tabs, Space, ConfigProvider, Card, Tag, Switch } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -10,9 +10,43 @@ import {
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
-import { getAllContact, deleteContact } from '../../../api/contact';
+import { getAllContact, deleteContact, updateContact } from '../../../api/contact';
+
+const ContactCard = memo(function ContactCard({
+    contact,
+    showEditModal,
+    showDeleteModal,
+    onStatusToggle,
+}) {
+    const handleStatusToggle = async (checked) => {
+        try {
+            const updatedContact = {
+                contact_name: contact.contact_name || contact.name,
+                contact_phone: contact.contact_phone || contact.phone,
+                is_active: checked,
+                contact_type: contact.contact_type,
+            };
+
+            await updateContact(contact.contact_id || contact.id, updatedContact);
+
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Status "${contact.contact_name || contact.name}" berhasil diperbarui.`,
+            });
+
+            // Refresh contacts list
+            onStatusToggle && onStatusToggle();
+        } catch (error) {
+            console.error('Error updating contact status:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memperbarui status kontak',
+            });
+        }
+    };
 
-const ContactCard = memo(function ContactCard({ contact, showEditModal, showDeleteModal }) {
     return (
         <Col xs={24} sm={12} md={8} lg={6}>
             <div
@@ -44,7 +78,7 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
                     }}
                 >
                     {/* Type Badge - Top Left */}
-                    <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
+                    {/* <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
                         <Tag
                             color={
                                 contact.contact_type === 'operator'
@@ -57,19 +91,37 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
                         >
                             {contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
                         </Tag>
-                    </div>
+                    </div> */}
 
-                    {/* Status Badge - Top Right */}
-                    <div style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}>
-                        {contact.status === 'active' ? (
-                            <Tag color={'green'} style={{ fontSize: '11px' }}>
-                                Active
-                            </Tag>
-                        ) : (
-                            <Tag color={'red'} style={{ fontSize: '11px' }}>
-                                InActive
-                            </Tag>
-                        )}
+                    {/* Status Slider - Top Right */}
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            zIndex: 1,
+                            padding: '4px 8px',
+                        }}
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <Switch
+                                checked={contact.status === 'active'}
+                                onChange={handleStatusToggle}
+                                style={{
+                                    backgroundColor:
+                                        contact.status === 'active' ? '#52c41a' : '#d9d9d9',
+                                }}
+                            />
+                            <span
+                                style={{
+                                    fontSize: '12px',
+                                    color: contact.status === 'active' ? '#52c41a' : '#ff4d4f',
+                                    fontWeight: 500,
+                                }}
+                            >
+                                {contact.status === 'active' ? 'Active' : 'Inactive'}
+                            </span>
+                        </div>
                     </div>
 
                     {/* Main Content */}
@@ -316,7 +368,7 @@ const ListContact = memo(function ListContact(props) {
                         <Row justify="space-between" align="middle" gutter={[8, 8]}>
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
-                                    placeholder="Search by name or type..."
+                                    placeholder="Search by name..."
                                     value={formDataFilter.criteria}
                                     onChange={(e) => {
                                         const value = e.target.value;
@@ -382,7 +434,8 @@ const ListContact = memo(function ListContact(props) {
                                 marginBottom: '16px',
                             }}
                         >
-                            <Tabs
+                            {/* Tabs  */}
+                            {/* <Tabs
                                 activeKey={activeTab}
                                 onChange={setActiveTab}
                                 size="large"
@@ -400,7 +453,7 @@ const ListContact = memo(function ListContact(props) {
                                         label: 'Gudang',
                                     },
                                 ]}
-                            />
+                            /> */}
                         </div>
 
                         {getFilteredContacts().length === 0 ? (
@@ -423,6 +476,7 @@ const ListContact = memo(function ListContact(props) {
                                         }}
                                         showEditModal={showEditModal}
                                         showDeleteModal={showDeleteModal}
+                                        onStatusToggle={fetchContacts}
                                     />
                                 ))}
                             </Row>