kediritechnopark/mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
Vassshhh
2025-08-06 18:28:52 +07:00
parent 6db8f11ae9
commit 262dce053f
2 changed files with 155 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/FollowUps.js
View File

@@ -1,4 +1,3 @@
// FollowUps.js
import React, { useState } from 'react'; import React, { useState } from 'react';
import styles from './FollowUps.module.css'; import styles from './FollowUps.module.css';
@@ -46,9 +45,38 @@ const FollowUps = ({ data: initialData }) => {
} }
}; };
// Gabungkan data berdasarkan contact_info
const mergedDataMap = new Map();
data.forEach(user => {
const key = user.contact_info;
if (!mergedDataMap.has(key)) {
mergedDataMap.set(key, {
...user,
notesList: [{
note: user.notes,
created_at: user.created_at
}]
});
} else {
const existing = mergedDataMap.get(key);
existing.notesList.push({
note: user.notes,
created_at: user.created_at
});
// Prioritaskan status tertinggi
existing.issuccess = existing.issuccess || user.issuccess;
existing.isfollowup = existing.issuccess ? false : (existing.isfollowup || user.isfollowup);
}
});
const mergedData = Array.from(mergedDataMap.values());
// Filter & Sort // Filter & Sort
const now = new Date(); const now = new Date();
const filteredData = data const filteredData = mergedData
.filter(user => { .filter(user => {
switch (statusFilter) { switch (statusFilter) {
case 'pending': case 'pending':
@@ -62,7 +90,8 @@ const FollowUps = ({ data: initialData }) => {
} }
}) })
.filter(user => { .filter(user => {
const created = new Date(user.created_at); const latestNote = user.notesList[user.notesList.length - 1];
const created = new Date(latestNote.created_at);
switch (dateFilter) { switch (dateFilter) {
case 'today': case 'today':
return created.toDateString() === now.toDateString(); return created.toDateString() === now.toDateString();
@@ -75,9 +104,9 @@ const FollowUps = ({ data: initialData }) => {
} }
}) })
.sort((a, b) => { .sort((a, b) => {
const dateA = new Date(a.created_at); const aDate = new Date(a.notesList[a.notesList.length - 1].created_at);
const dateB = new Date(b.created_at); const bDate = new Date(b.notesList[b.notesList.length - 1].created_at);
return sortOrder === 'latest' ? dateB - dateA : dateA - dateB; return sortOrder === 'latest' ? bDate - aDate : aDate - bDate;
}); });
return ( return (
@@ -139,7 +168,7 @@ const FollowUps = ({ data: initialData }) => {
</div> </div>
) : ( ) : (
filteredData.map(user => ( filteredData.map(user => (
<div key={user.id} className={styles.card}> <div key={user.contact_info} className={styles.card}>
<div className={styles.cardHeader}> <div className={styles.cardHeader}>
<h3 className={styles.userName}>{user.name}</h3> <h3 className={styles.userName}>{user.name}</h3>
<span className={styles.statusBadge}> <span className={styles.statusBadge}>
@@ -154,17 +183,20 @@ const FollowUps = ({ data: initialData }) => {
</div> </div>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<p className={styles.notes}>{user.notes}</p> <ul className={styles.notesList}>
<div className={styles.contactInfo}> {user.notesList.map((entry, index) => (
<span className={styles.contactLabel}>Contact:</span> <li key={index}>
<span className={styles.contactValue}>{user.contact_info}</span> <strong>{new Date(entry.created_at).toLocaleString('id-ID', {
</div>
<div className={styles.dateInfo}>
{new Date(user.created_at).toLocaleString('id-ID', {
dateStyle: 'medium', dateStyle: 'medium',
timeStyle: 'short', timeStyle: 'short',
timeZone: 'Asia/Jakarta' timeZone: 'Asia/Jakarta'
})} })}:</strong> {entry.note}
</li>
))}
</ul>
<div className={styles.contactInfo}>
<span className={styles.contactLabel}>Contact:</span>
<span className={styles.contactValue}>{user.contact_info}</span>
</div> </div>
</div> </div>

171
src/FollowUps.module.css
View File

@@ -1,6 +1,6 @@
/* FollowUps.module.css */ /* FollowUps.module.css */
.container { .container {
background-color: #f8fafc; background-color: #f1f3f4;
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -12,8 +12,8 @@
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
margin-bottom: 24px; margin-bottom: 24px;
border: 1px solid #e2e8f0; border: 1px solid #e0e0e0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
} }
.filterGroup { .filterGroup {
@@ -79,37 +79,38 @@
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px; gap: 16px;
} }
.card { .card {
background: white; background: #f8f9fa;
border-radius: 12px; border-radius: 12px;
border: 1px solid #e2e8f0; border: 1px solid #dee2e6;
overflow: hidden; overflow: hidden;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
} }
.card:hover { .card:hover {
transform: translateY(-2px); transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #cbd5e1; border-color: #adb5bd;
} }
.cardHeader { .cardHeader {
padding: 20px 20px 12px; padding: 18px 18px 12px;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid #e9ecef;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
background: #ffffff;
} }
.userName { .userName {
font-size: 18px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1f2937; color: #212529;
margin: 0; margin: 0;
flex: 1; flex: 1;
} }
@@ -119,42 +120,71 @@
} }
.badgeSuccess { .badgeSuccess {
background: #dcfce7; background: #d1e7dd;
color: #166534; color: #0a3622;
padding: 4px 8px; padding: 4px 8px;
border-radius: 6px; border-radius: 4px;
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
border: 1px solid #badbcc;
} }
.badgeProgress { .badgeProgress {
background: #fef3c7; background: #fff3cd;
color: #92400e; color: #664d03;
padding: 4px 8px; padding: 4px 8px;
border-radius: 6px; border-radius: 4px;
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
border: 1px solid #ffda6a;
} }
.badgePending { .badgePending {
background: #f3f4f6; background: #e2e3e5;
color: #6b7280; color: #41464b;
padding: 4px 8px; padding: 4px 8px;
border-radius: 6px; border-radius: 4px;
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
border: 1px solid #c4c8cc;
} }
.cardContent { .cardContent {
padding: 12px 20px 20px; padding: 16px 18px;
background: #f8f9fa;
} }
.notes { .notesList {
color: #4b5563;
font-size: 14px;
line-height: 1.5;
margin: 0 0 16px 0; margin: 0 0 16px 0;
word-break: break-word; padding: 12px;
list-style-type: none;
font-size: 14px;
color: #212529;
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #e9ecef;
max-height: 120px;
overflow-y: auto;
}
.notesList li {
margin-bottom: 8px;
padding: 6px 0;
border-bottom: 1px solid #f8f9fa;
line-height: 1.4;
}
.notesList li:last-child {
margin-bottom: 0;
border-bottom: none;
}
.notesList li strong {
color: #6c757d;
font-weight: 500;
font-size: 12px;
display: block;
margin-bottom: 2px;
} }
.contactInfo { .contactInfo {
@@ -166,37 +196,33 @@
.contactLabel { .contactLabel {
font-size: 12px; font-size: 12px;
color: #6b7280; color: #6c757d;
font-weight: 500; font-weight: 500;
} }
.contactValue { .contactValue {
font-size: 14px; font-size: 13px;
color: #374151; color: #495057;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
} background: #ffffff;
padding: 4px 6px;
.dateInfo { border-radius: 4px;
font-size: 12px; border: 1px solid #e9ecef;
color: #9ca3af; display: inline-block;
padding: 8px 12px;
background: #f9fafb;
border-radius: 6px;
border-left: 3px solid #e5e7eb;
} }
.cardActions { .cardActions {
padding: 16px 20px; padding: 14px 18px;
border-top: 1px solid #f1f5f9; border-top: 1px solid #e9ecef;
background: #fafbfc; background: #ffffff;
} }
.actionBtn { .actionBtn {
width: 100%; width: 100%;
padding: 12px 16px; padding: 10px 16px;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -209,27 +235,32 @@
.btnPrimary { .btnPrimary {
background: #25d366; background: #25d366;
color: white; color: white;
border: 1px solid #25d366;
} }
.btnPrimary:hover { .btnPrimary:hover {
background: #1da851; background: #1da851;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(37, 211, 102, 0.3);
} }
.btnComplete { .btnComplete {
background: #3b82f6; background: #0d6efd;
color: white; color: white;
border: 1px solid #0d6efd;
} }
.btnComplete:hover { .btnComplete:hover {
background: #2563eb; background: #0b5ed7;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
} }
.btnSuccess { .btnSuccess {
background: #10b981; background: #198754;
color: white; color: white;
cursor: default; cursor: default;
border: 1px solid #198754;
} }
/* Empty State */ /* Empty State */
@@ -238,16 +269,21 @@
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #6b7280; color: #6b7280;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #dee2e6;
} }
.emptyIcon { .emptyIcon {
font-size: 48px; font-size: 48px;
margin-bottom: 16px; margin-bottom: 16px;
opacity: 0.5;
} }
.emptyState p { .emptyState p {
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
color: #6c757d;
} }
/* Responsive Design */ /* Responsive Design */
@@ -272,27 +308,31 @@
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 16px; gap: 12px;
} }
.cardHeader { .cardHeader {
padding: 16px 16px 10px; padding: 14px 14px 10px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
} }
.cardContent { .cardContent {
padding: 10px 16px 16px; padding: 12px 14px;
} }
.cardActions { .cardActions {
padding: 12px 16px; padding: 10px 14px;
} }
.actionBtn { .actionBtn {
padding: 10px 14px; padding: 9px 14px;
font-size: 13px; font-size: 12px;
}
.userName {
font-size: 15px;
} }
} }
@@ -301,16 +341,21 @@
padding: 12px; padding: 12px;
} }
.userName { .grid {
font-size: 16px; gap: 10px;
} }
.notes { .userName {
font-size: 14px;
}
.notesList {
font-size: 13px; font-size: 13px;
padding: 10px;
} }
.statusBadge span { .statusBadge span {
font-size: 11px; font-size: 10px;
padding: 3px 6px; padding: 3px 6px;
} }
} }