Job Visualization - Copy this React, Tailwind Component to your project

không phải ý của tôi nó sẽ show ra theo ngày dạng lịch chứa các job trong 1 ngày start và end từ đâu đến đâu trạng thái như nào, data trả về từ api có dang { "data": [ { "id": "463020106549433", "job_id": "9992c4e7-4a983394f67e2", "media": "tiktok", "tag": "dentsu_idia", "state": "success", "environment": "production", "start_time": "2024-10-11T18:59:38.883Z", "end_time": "2024-10-11T19:13:42.313Z", "setting": { "interval": "daily", "cron": "cron(00 18 * * ? *)", "destination": { "driver": "s3", "bucket": "dd-fdh", "prefix": "tiktok/production", "suffix": "" } }, "tasks": [ { "state": "success", "data_type": "reachable_image" }, { "state": "success", "data_type": "reachable_video" } ] }, { "id": "4630223933761", "job_id": "df25069d-4f89-433d2a29189", "media": "Facebook", "tag": "dentsu_idia", "state": "success", "environment": "production", "start_time": "2024-10-11T20:30:31.655Z", "end_time": "2024-10-11T20:37:42.545Z", "setting": { "interval": "custom", "destination": { "driver": "s3", "bucket": "dd-fdh", "prefix": "facebook/production", "suffix": "" } }, "tasks": [] }, { "id": "46297936228673", "job_id": "5b86fb4b-012d-4943e1e9ed:58", "media": "Google Ads", "tag": "dentsu_idia", "state": "success", "environment": "production", "start_time": "2024-10-10T16:00:37.824Z", "end_time": "2024-10-10T16:26:01.241Z", "setting": { "interval": "daily", "cron": "cron(00 02 * * ? *)", "destination": { "driver": "gcs", "bucket": "idia-fdh-prd", "prefix": "google-ads/production", "suffix": "" } }, "tasks": [] }, { "id": "46308809226113", "job_id": "8c675360-fc250d44d87dd0:32", "media": "Google Ads", "tag": "dentsu_idia", "state": "success", "environment": "production", "start_time": "2024-10-13T16:00:40.687Z", "end_time": "2024-10-13T16:05:43.670Z", "setting": { "interval": "daily", "cron": "cron(00 02 * * ? *)", "destination": { "driver": "gcs", "bucket": "idia-fdh-prd", "prefix": "google-ads/production", "suffix": "" } }, "tasks": [ { "state": "success", "data_type": "ad_group_criteria" } ] } ] }