feat: hide tabs and improve UI elements
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user