yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: hide tabs and improve UI elements

Browse Source
This commit is contained in:
Rafiafrzl
2025-12-02 14:05:35 +07:00
parent 2e98dc168a
commit edf20050db
2 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/contact/component/DetailContact.jsx
View File

@@ -251,7 +251,8 @@ const DetailContact = memo(function DetailContact(props) {
style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }} style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
/> />
</div> </div>
<div style={{ marginBottom: 12 }}> {/* Contact Type */}
{/* <div style={{ marginBottom: 12 }}>
<Text strong>Contact Type</Text> <Text strong>Contact Type</Text>
<Text style={{ color: 'red' }}> *</Text> <Text style={{ color: 'red' }}> *</Text>
<Select <Select
@@ -264,7 +265,7 @@ const DetailContact = memo(function DetailContact(props) {
<Select.Option value="operator">Operator</Select.Option> <Select.Option value="operator">Operator</Select.Option>
<Select.Option value="gudang">Gudang</Select.Option> <Select.Option value="gudang">Gudang</Select.Option>
</Select> </Select>
</div> </div> */}
</div> </div>
</Modal> </Modal>
); );

92
src/pages/contact/component/ListContact.jsx
View File

@@ -1,5 +1,5 @@
import React, { memo, useState, useEffect } from 'react'; 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 { import {
PlusOutlined, PlusOutlined,
EditOutlined, EditOutlined,
@@ -10,9 +10,43 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif'; 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 ( return (
<Col xs={24} sm={12} md={8} lg={6}> <Col xs={24} sm={12} md={8} lg={6}>
<div <div
@@ -44,7 +78,7 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
}} }}
> >
{/* Type Badge - Top Left */} {/* 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 <Tag
color={ color={
contact.contact_type === 'operator' 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'} {contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
</Tag> </Tag>
</div> </div> */}
{/* Status Badge - Top Right */} {/* Status Slider - Top Right */}
<div style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}> <div
{contact.status === 'active' ? ( style={{
<Tag color={'green'} style={{ fontSize: '11px' }}> position: 'absolute',
Active top: 0,
</Tag> right: 0,
) : ( zIndex: 1,
<Tag color={'red'} style={{ fontSize: '11px' }}> padding: '4px 8px',
InActive }}
</Tag> >
)} <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> </div>
{/* Main Content */} {/* Main Content */}
@@ -316,7 +368,7 @@ const ListContact = memo(function ListContact(props) {
<Row justify="space-between" align="middle" gutter={[8, 8]}> <Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}> <Col xs={24} sm={24} md={12} lg={12}>
<Input.Search <Input.Search
placeholder="Search by name or type..." placeholder="Search by name..."
value={formDataFilter.criteria} value={formDataFilter.criteria}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -382,7 +434,8 @@ const ListContact = memo(function ListContact(props) {
marginBottom: '16px', marginBottom: '16px',
}} }}
> >
<Tabs {/* Tabs */}
{/* <Tabs
activeKey={activeTab} activeKey={activeTab}
onChange={setActiveTab} onChange={setActiveTab}
size="large" size="large"
@@ -400,7 +453,7 @@ const ListContact = memo(function ListContact(props) {
label: 'Gudang', label: 'Gudang',
}, },
]} ]}
/> /> */}
</div> </div>
{getFilteredContacts().length === 0 ? ( {getFilteredContacts().length === 0 ? (
@@ -423,6 +476,7 @@ const ListContact = memo(function ListContact(props) {
}} }}
showEditModal={showEditModal} showEditModal={showEditModal}
showDeleteModal={showDeleteModal} showDeleteModal={showDeleteModal}
onStatusToggle={fetchContacts}
/> />
))} ))}
</Row> </Row>