import React, { useEffect, useState } from 'react';
const MyTable = ({ filterValues }) => {
const [intradata, setIntradata] = useState(null);
const [data, setData] = useState(null);
const [selectedGroup, setSelectedGroup] = useState('summary');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [columns, setColumns] = useState([]);
const [validGroups, setValidGroups] = useState([]);
// Updated parseDate function
const parseDate = (dateString) => {
console.log('Parsing date:', dateString);
try {
// Check if the date string is in Persian format (contains non-numeric characters)
const isPersianFormat = /[^\d]/.test(dateString);
if (isPersianFormat) {
// Parse Persian date
const match = dateString.match(/(\d+)/g);
if (!match || match.length !== 3) {
throw new Error(`Invalid date format for end_date: ${dateString}`);
}
const [year, month, day] = match.map(Number);
// Convert Persian date to Gregorian date
const gregorianYear = year + 621; // Add 621 to convert to Gregorian year
const gregorianMonth = month - 1; // Months are zero-based
const gregorianDay = day;
return new Date(gregorianYear, gregorianMonth, gregorianDay);
} else {
// Parse Gregorian date
const [year, month, day] = dateString.match(/(\d+)/g).map(Number);
return new Date(year, month - 1, day); // Months are zero-based
}
} catch (error) {
console.error('Error parsing date:', error);
// Log additional information about the problematic date
console.log('Problematic date:', dateString);
// Provide a fallback date (e.g., current date) in case of parsing failure
return new Date();
}
};
useEffect(() => {
console.log('Selected Group:', selectedGroup);
console.log('Filter04 Value:', filterValues.filter04);
const fetchData = async () => {
try {
// Fetch intradatacols
const intradatacolsResponse = await fetch('http://5.34.198.87:8000/api/options/intradatacols');
if (!intradatacolsResponse.ok) {
throw new Error(`HTTP error! Status: ${intradatacolsResponse.status}`);
}
const intradatacolsData = await intradatacolsResponse.json();
console.log('API Response for intradatacols:', intradatacolsData);
setData(intradatacolsData);
const groups = Object.keys(intradatacolsData.groups);
setValidGroups(groups);
const initialColumns = intradatacolsData.groupscolumn[selectedGroup] || [];
setColumns(initialColumns);
if (!groups.includes(selectedGroup)) {
console.error(`Invalid selectedGroup: ${selectedGroup}`);
return;
}
// Fetch intradata
const intradataResponse = await fetch('http://5.34.198.87:8000/api/options/intradata');
if (!intradataResponse.ok) {
throw new Error(`HTTP error! Status: ${intradataResponse.status}`);
}
const intradataData = await intradataResponse.json();
console.log('API Response for intradata:', intradataData);
setIntradata(intradataData.data);
} catch (error) {
console.error('Error fetching data:', error);
setError(error.message || 'An error occurred while fetching data.');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedGroup, filterValues.filter04]);
useEffect(() => {
console.log('intradata:', intradata);
console.log('columns:', columns);
console.log('data:', data);
}, [intradata, columns, data]);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
if (!intradata || !data || !data.groups || !data.groupscolumn) {
return <div>No data available</div>;
}
// Filter the intradata based on filterValues
const filteredData = intradata.filter((item) => {
// Check filter01
if (filterValues.filter01 && item.ua_instrument_id.toString().toLowerCase() !== filterValues.filter01.toString().toLowerCase()) {
console.log(`ua_instrument_id Filter: ${item.ua_instrument_id} !== ${filterValues.filter01}`);
return false;
}
// Check filter02
if (filterValues.filter02 && item.option_status.toLowerCase() !== filterValues.filter02.toLowerCase()) {
console.log(`Filter02: ${item.option_status} !== ${filterValues.filter02}`);
return false;
}
// Check option type filter (filter04)
if (filterValues.filter04 && item.option_type.toLowerCase().includes(filterValues.filter04.toLowerCase())) {
console.log(`Option type Filter: ${item.option_type} does not include ${filterValues.filter04}`);
console.log('Item Option Type:', item.option_type);
console.log('Filter04 Value:', filterValues.filter04);
return false;
}
// Check date range filter
if (filterValues.startDate && filterValues.endDate) {
const itemDate = parseDate(item.end_date);
if (isNaN(itemDate.getTime())) {
console.error(`Invalid date format for end_date: ${item.end_date}`);
return false;
}
const startDate = parseDate(filterValues.startDate);
const endDate = parseDate(filterValues.endDate);
console.log('Item Date:', itemDate);
console.log('Start Date:', startDate);
console.log('End Date:', endDate);
console.log('Column Values:', item[columns[0]]);
return itemDate >= startDate && itemDate <= endDate;
}
return true;
});
console.log('Filtered Data:', filteredData);
console.log('Filtered Data for Rendering:', filteredData);
return (
<div className="container mt-4">
<div className="btn-group mb-3">
{validGroups.map((groupKey) => (
<button
key={groupKey}
type="button"
className={`btn ${selectedGroup === groupKey ? 'bg-blue-500 text-white' : 'bg-blue-200'}`}
onClick={() => setSelectedGroup(groupKey)}
>
{data.groups[groupKey]}
</button>
))}
</div>
<div className="table-container overflow-x-auto" style={{ maxHeight: '400px' }}>
<table className="table-auto w-full border-collapse border border-gray-800">
<thead className="bg-gray-800 text-white">
<tr>
{columns.map((column, index) => (
<th key={index} className="py-2 px-4 border border-gray-800">
{data.fields[column]}
</th>
))}
</tr>
</thead>
<tbody>
{filteredData.length > 0 ? (
filteredData.map((item, itemIndex) => (
<tr key={itemIndex} className={itemIndex % 2 === 0 ? 'bg-gray-100' : 'bg-white'}>
{columns.map((column, columnIndex) => (
<td key={columnIndex} className="py-2 px-4 border border-gray-800">
{item[column] instanceof Date ? item[column].toLocaleDateString() : item[column]}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="py-2 px-4 border border-gray-800">
No matching data
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default MyTable;
