Merge branch 'main' of https://code.sdsdev.co.kr/SDSRV-IDP/sbt-idp into vietanh99-add-column
This commit is contained in:
daovietanh99
commit
fc9cb6956f
@ -15,11 +15,13 @@ import json
|
||||
from ..exception.exceptions import InvalidException, RequiredFieldException, NotFoundException
|
||||
from ..models import SubscriptionRequest, Report, ReportFile, SubscriptionRequestFile
|
||||
from ..utils.accuracy import shadow_report, MonthReportAccumulate, first_of_list, extract_report_detail_list, IterAvg
|
||||
from ..utils.file import download_from_S3, convert_date_string
|
||||
from ..utils.file import download_from_S3, convert_date_string, build_media_url_v2, build_url, build_S3_url
|
||||
from ..utils.redis import RedisUtils
|
||||
from ..utils.process import string_to_boolean
|
||||
from ..request.ReportCreationSerializer import ReportCreationSerializer
|
||||
from ..utils.subsidiary import map_subsidiary_long_to_short, map_subsidiary_short_to_long
|
||||
from fwd_api.utils.accuracy import predict_result_to_ready
|
||||
import copy
|
||||
|
||||
redis_client = RedisUtils()
|
||||
|
||||
@ -110,6 +112,7 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
try:
|
||||
start_date = timezone.datetime.strptime(start_date_str, '%Y-%m-%d') # We care only about day precision only
|
||||
end_date = timezone.datetime.strptime(end_date_str, '%Y-%m-%d')
|
||||
end_date = end_date + timezone.timedelta(days=1)
|
||||
# Round:
|
||||
# end_date_str to the beginning of the next day
|
||||
# start_date_str to the start of the date
|
||||
@ -117,7 +120,7 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
end_date = timezone.make_aware(end_date)
|
||||
|
||||
start_date_str = start_date.strftime('%Y-%m-%dT%H:%M:%S%z') # inside logic will include second precision with timezone for calculation
|
||||
end_date_str = (end_date + timezone.timedelta(days=1)).strftime('%Y-%m-%dT%H:%M:%S%z')
|
||||
end_date_str = end_date.strftime('%Y-%m-%dT%H:%M:%S%z')
|
||||
base_query &= Q(created_at__range=(start_date, end_date))
|
||||
except Exception as e:
|
||||
raise InvalidException(excArgs="Date format")
|
||||
@ -126,15 +129,13 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
base_query &= Q(request_id=request_id)
|
||||
if redemption_id:
|
||||
base_query &= Q(redemption_id=redemption_id)
|
||||
base_query &= Q(is_test_request=False)
|
||||
if isinstance(include_test, str):
|
||||
include_test = True if include_test=="true" else False
|
||||
if include_test:
|
||||
# base_query = ~base_query
|
||||
base_query.children = base_query.children[:-1]
|
||||
if not include_test:
|
||||
base_query &= Q(is_test_request=False)
|
||||
elif isinstance(include_test, bool):
|
||||
if include_test:
|
||||
base_query = ~base_query
|
||||
if not include_test:
|
||||
base_query &= Q(is_test_request=False)
|
||||
if isinstance(is_reviewed, str):
|
||||
if is_reviewed == "reviewed":
|
||||
base_query &= Q(is_reviewed=True)
|
||||
@ -148,6 +149,8 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
|
||||
subscription_requests = SubscriptionRequest.objects.filter(base_query).order_by('created_at')
|
||||
|
||||
request_count = subscription_requests.count()
|
||||
|
||||
paginator = Paginator(subscription_requests, page_size)
|
||||
page = paginator.get_page(page_number)
|
||||
|
||||
@ -192,6 +195,7 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
'number': page.number,
|
||||
'total_pages': page.paginator.num_pages,
|
||||
'count': page.paginator.count,
|
||||
'total_requests': request_count
|
||||
}
|
||||
}
|
||||
|
||||
@ -336,7 +340,7 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
location=OpenApiParameter.QUERY,
|
||||
description='Start date (YYYY-mm-DDTHH:MM:SSZ)',
|
||||
type=OpenApiTypes.DATE,
|
||||
default='2023-01-02T00:00:00+0700',
|
||||
default='2024-01-02T00:00:00+0700',
|
||||
),
|
||||
OpenApiParameter(
|
||||
name='end_date',
|
||||
@ -541,8 +545,6 @@ class AccuracyViewSet(viewsets.ViewSet):
|
||||
return response
|
||||
|
||||
return JsonResponse({'error': 'Invalid request method.'}, status=405)
|
||||
class RequestViewSet(viewsets.ViewSet):
|
||||
lookup_field = "username"
|
||||
|
||||
@extend_schema(
|
||||
request={
|
||||
@ -557,7 +559,7 @@ class RequestViewSet(viewsets.ViewSet):
|
||||
},
|
||||
},
|
||||
responses=None,
|
||||
tags=['Request']
|
||||
tags=['Accuracy']
|
||||
)
|
||||
@action(detail=False, url_path=r"request/(?P<request_id>[\w\-]+)", methods=["GET", "POST"])
|
||||
def get_subscription_request(self, request, request_id=None):
|
||||
@ -570,29 +572,67 @@ class RequestViewSet(viewsets.ViewSet):
|
||||
raise NotFoundException(excArgs=request_id)
|
||||
|
||||
subscription_request = subscription_request.first()
|
||||
|
||||
sample_result = {
|
||||
"request_id": subscription_request.request_id,
|
||||
"retailername": None,
|
||||
"sold_to_party": None,
|
||||
"purchase_date": None,
|
||||
"imei_number": []
|
||||
}
|
||||
|
||||
data = []
|
||||
files = []
|
||||
|
||||
subscription_request_files = SubscriptionRequestFile.objects.filter(request=subscription_request.id)
|
||||
|
||||
for subscription_request_file in subscription_request_files:
|
||||
sub = subscription_request.subscription
|
||||
user_id = sub.user.id
|
||||
sync_id = sub.user.sync_id
|
||||
sub_id = sub.id
|
||||
reviewed_result = subscription_request_file.reviewed_result
|
||||
feedback_result = subscription_request_file.feedback_result
|
||||
predicted_result = subscription_request_file.predict_result
|
||||
|
||||
if not reviewed_result:
|
||||
reviewed_result = copy.deepcopy(sample_result)
|
||||
if not feedback_result:
|
||||
feedback_result = copy.deepcopy(sample_result)
|
||||
if not predicted_result:
|
||||
predicted_result = copy.deepcopy(sample_result)
|
||||
|
||||
files.append({
|
||||
'File Name': subscription_request_file.file_name,
|
||||
'File Path': subscription_request_file.file_path,
|
||||
'File Category': subscription_request_file.file_category,
|
||||
'File URL': build_S3_url("sbt_invoice/" + subscription_request.request_id + "/" + subscription_request_file.file_name, 600),
|
||||
'Original Name': subscription_request_file.origin_name,
|
||||
'Is Bad Image Quality': subscription_request_file.is_bad_image_quality,
|
||||
'Doc Type': subscription_request_file.doc_type,
|
||||
'Processing Time (ms)': subscription_request_file.processing_time,
|
||||
'Reason': subscription_request_file.reason,
|
||||
'Counter Measures': subscription_request_file.counter_measures,
|
||||
'Predicted Result': predicted_result,
|
||||
'Feedback Result': feedback_result,
|
||||
'Reviewed Result': reviewed_result,
|
||||
'Feedback Accuracy': subscription_request_file.feedback_accuracy,
|
||||
'Reviewed Accuracy': subscription_request_file.reviewed_accuracy,
|
||||
'Created At': subscription_request_file.created_at.isoformat(),
|
||||
'Updated At': subscription_request_file.updated_at.isoformat()
|
||||
})
|
||||
|
||||
reviewed_result = subscription_request.reviewed_result
|
||||
feedback_result = subscription_request.feedback_result
|
||||
predicted_result = predict_result_to_ready(subscription_request.predict_result)
|
||||
|
||||
if not reviewed_result:
|
||||
reviewed_result = copy.deepcopy(sample_result)
|
||||
if not feedback_result:
|
||||
feedback_result = copy.deepcopy(sample_result)
|
||||
if not predicted_result:
|
||||
predicted_result = copy.deepcopy(sample_result)
|
||||
|
||||
imeis = []
|
||||
purchase_date = []
|
||||
retailer = ""
|
||||
try:
|
||||
if subscription_request.reviewed_result is not None:
|
||||
imeis = subscription_request.reviewed_result.get("imei_number", [])
|
||||
purchase_date = subscription_request.reviewed_result.get("purchase_date", [])
|
||||
retailer = subscription_request.reviewed_result.get("retailername", "")
|
||||
elif subscription_request.feedback_result is not None :
|
||||
imeis = subscription_request.feedback_result.get("imei_number", [])
|
||||
purchase_date = subscription_request.feedback_result.get("purchase_date", [])
|
||||
retailer = subscription_request.feedback_result.get("retailername", "")
|
||||
elif subscription_request.predict_result is not None:
|
||||
if subscription_request.predict_result.get("status", 404) == 200:
|
||||
imeis = subscription_request.predict_result.get("content", {}).get("document", [])[0].get("content", [])[3].get("value", [])
|
||||
purchase_date = subscription_request.predict_result.get("content", {}).get("document", [])[0].get("content", [])[2].get("value", [])
|
||||
retailer = subscription_request.predict_result.get("content", {}).get("document", [])[0].get("content", [])[0].get("value", [])
|
||||
except Exception as e:
|
||||
print(f"[ERROR]: {e}")
|
||||
print(f"[ERROR]: {subscription_request}")
|
||||
data.append({
|
||||
'Document Type': subscription_request.doc_type,
|
||||
'RequestID': subscription_request.request_id,
|
||||
@ -600,19 +640,18 @@ class RequestViewSet(viewsets.ViewSet):
|
||||
'Process Type': subscription_request.process_type,
|
||||
'Provider Code': subscription_request.provider_code,
|
||||
'Status': subscription_request.status,
|
||||
'IMEIs': imeis,
|
||||
'Purchase Date': purchase_date,
|
||||
'Retailer': retailer,
|
||||
'Reviewed result': subscription_request.reviewed_result,
|
||||
'Feedback result': subscription_request.feedback_result,
|
||||
'Files': files,
|
||||
'Reviewed Result': reviewed_result,
|
||||
'Feedback Result': feedback_result,
|
||||
'Predicted Result': predicted_result,
|
||||
'Is Test Request': subscription_request.is_test_request,
|
||||
'Client Request Time (ms)': subscription_request.client_request_time,
|
||||
'Server Processing Time (ms)': subscription_request.preprocessing_time + subscription_request.ai_inference_time,
|
||||
'Is Reviewed': subscription_request.is_reviewed,
|
||||
|
||||
# 'Is Bad Quality': subscription_request.is_bad_image_quality,
|
||||
'created_at': subscription_request.created_at.isoformat(),
|
||||
'updated_at': subscription_request.updated_at.isoformat()
|
||||
'Feedback Accuracy': subscription_request.feedback_accuracy,
|
||||
'Reviewed Accuracy': subscription_request.reviewed_accuracy,
|
||||
'Created At': subscription_request.created_at.isoformat(),
|
||||
'Updated At': subscription_request.updated_at.isoformat()
|
||||
})
|
||||
|
||||
response = {
|
||||
@ -633,23 +672,31 @@ class RequestViewSet(viewsets.ViewSet):
|
||||
|
||||
subscription_request = subscription_request.first()
|
||||
|
||||
file_query = Q(request=request_id)
|
||||
subscription_request_files = SubscriptionRequestFile.objects.filter(request=subscription_request.id)
|
||||
|
||||
subscription_request_files = SubscriptionRequestFile.objects.filter(file_query)
|
||||
|
||||
reviewed_result = json.loads(data["reviewed_result"])
|
||||
if "reviewed_result" not in data:
|
||||
raise InvalidException(excArgs=f'reviewed_result')
|
||||
|
||||
reviewed_result = data["reviewed_result"]
|
||||
for field in ['retailername', 'sold_to_party', 'purchase_date', 'imei_number']:
|
||||
if not field in reviewed_result.keys():
|
||||
raise RequiredFieldException(excArgs=f'reviewed_result.{field}')
|
||||
reviewed_result['request_id'] = request_id
|
||||
|
||||
for subscription_request_file in subscription_request_files:
|
||||
if subscription_request_file.doc_type == 'invoice':
|
||||
subscription_request_file.reviewed_result = reviewed_result
|
||||
subscription_request_file.reviewed_result['imei_number'] = []
|
||||
elif subscription_request_file.doc_type == 'imei':
|
||||
subscription_request_file.reviewed_result = {"retailername": None, "sold_to_party": None, "purchase_date": [], "imei_number": [reviewed_result["imei_number"][subscription_request_file.index_in_request]]}
|
||||
subscription_request_file.reviewed_result = {
|
||||
"retailername": None,
|
||||
"sold_to_party": None,
|
||||
"purchase_date": [],
|
||||
"imei_number": []}
|
||||
if len(reviewed_result["imei_number"]) - 1 >= subscription_request_file.index_in_request:
|
||||
subscription_request_file.reviewed_result["imei_number"] = reviewed_result["imei_number"][subscription_request_file.index_in_request]
|
||||
subscription_request_file.save()
|
||||
|
||||
for field in ['retailername', 'sold_to_party', 'purchase_date', 'imei_number']:
|
||||
if not field in reviewed_result.keys():
|
||||
raise RequiredFieldException(excArgs=f'reviewed_result.{field}')
|
||||
subscription_request.reviewed_result = reviewed_result
|
||||
subscription_request.reviewed_result['request_id'] = request_id
|
||||
subscription_request.is_reviewed = True
|
||||
@ -658,3 +705,50 @@ class RequestViewSet(viewsets.ViewSet):
|
||||
return JsonResponse({'message': 'success.'}, status=200)
|
||||
else:
|
||||
return JsonResponse({'error': 'Invalid request method.'}, status=405)
|
||||
|
||||
@extend_schema(
|
||||
request={
|
||||
'multipart/form-data': {
|
||||
'type': 'object',
|
||||
'properties': {
|
||||
'reason': {
|
||||
'type': 'string',
|
||||
'default': '''"Sample reason"''',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responses=None,
|
||||
tags=['Accuracy']
|
||||
)
|
||||
@action(detail=False, url_path=r"request_image/(?P<request_id>[\w\-]+)/(?P<request_image_id>[\w\-]+)", methods=["POST"])
|
||||
def request_image(self, request, request_id=None, request_image_id=None):
|
||||
if request.method == 'POST':
|
||||
data = request.data
|
||||
|
||||
base_query = Q(request_id=request_id)
|
||||
|
||||
subscription_request = SubscriptionRequest.objects.filter(base_query)
|
||||
|
||||
if subscription_request.count() == 0:
|
||||
raise NotFoundException(excArgs=request_id)
|
||||
|
||||
subscription_request = subscription_request.first()
|
||||
|
||||
subscription_request_files = SubscriptionRequestFile.objects.filter(request=subscription_request.id)
|
||||
|
||||
if "reason" not in data:
|
||||
raise InvalidException(excArgs=f'reason')
|
||||
|
||||
reason = data["reason"]
|
||||
|
||||
is_available = False
|
||||
for subscription_request_file in subscription_request_files:
|
||||
if subscription_request_file.file_name.split(".")[0] == request_image_id:
|
||||
subscription_request_file.reason = reason
|
||||
subscription_request_file.save()
|
||||
is_available = True
|
||||
if not is_available:
|
||||
raise NotFoundException(excArgs=request_id + "/" + request_image_id)
|
||||
else:
|
||||
return JsonResponse({'error': 'Invalid request method.'}, status=405)
|
||||
|
||||
@ -2,7 +2,7 @@ from django.conf import settings
|
||||
from rest_framework.routers import DefaultRouter, SimpleRouter
|
||||
|
||||
from fwd_api.api.ctel_view import CtelViewSet
|
||||
from fwd_api.api.accuracy_view import AccuracyViewSet, RequestViewSet
|
||||
from fwd_api.api.accuracy_view import AccuracyViewSet
|
||||
|
||||
from fwd_api.api.ctel_user_view import CtelUserViewSet
|
||||
|
||||
@ -16,7 +16,6 @@ else:
|
||||
router.register("ctel", CtelViewSet, basename="CtelAPI")
|
||||
router.register("ctel", CtelUserViewSet, basename="CtelUserAPI")
|
||||
router.register("ctel", AccuracyViewSet, basename="AccuracyAPI")
|
||||
router.register("ctel", RequestViewSet, basename="RequestAPI")
|
||||
|
||||
app_name = "api"
|
||||
urlpatterns = router.urls
|
||||
|
||||
@ -615,6 +615,8 @@ def predict_result_to_ready(result):
|
||||
"sold_to_party": "",
|
||||
"purchase_date": [],
|
||||
"imei_number": [],}
|
||||
if not result:
|
||||
return dict_result
|
||||
dict_result["retailername"] = result.get("content", {}).get("document", [{}])[0].get("content", [{}])[0].get("value", None)
|
||||
dict_result["sold_to_party"] = result.get("content", {}).get("document", [{}])[0].get("content", [{}, {}])[1].get("value", None)
|
||||
dict_result["purchase_date"] = result.get("content", {}).get("document", [{}])[0].get("content", [{}, {}, {}])[2].get("value", [])
|
||||
|
||||
@ -429,6 +429,8 @@ def build_media_url_v2(media_id: str, user_id: int, sub_id: int, u_sync_id: str)
|
||||
token = image_authenticator.generate_img_token_v2(user_id, sub_id, u_sync_id)
|
||||
return f'{settings.BASE_URL}/api/ctel/v2/media/request/{media_id}/?token={token}'
|
||||
|
||||
def build_S3_url(s3_key, exp_time):
|
||||
return s3_client.create_url_with_expiration(s3_key, exp_time)
|
||||
|
||||
def get_value(_dict, keys):
|
||||
keys = keys.split('.')
|
||||
|
||||
@ -51,6 +51,21 @@ class MinioS3Client:
|
||||
return res
|
||||
except Exception as e:
|
||||
print(f"Error downloading file from S3: {str(e)}")
|
||||
|
||||
def create_url_with_expiration(self, s3_key, expiration_time):
|
||||
try:
|
||||
res = self.s3_client.generate_presigned_url(
|
||||
ClientMethod="get_object", ExpiresIn=expiration_time,
|
||||
Params={
|
||||
"Bucket": self.bucket_name,
|
||||
"Key": s3_key,
|
||||
},
|
||||
)
|
||||
# print(f"URL for file '{s3_key}' expires in {expiration_time} seconds")
|
||||
return res
|
||||
except Exception as e:
|
||||
print(f"Error generating URL for file '{s3_key}': {str(e)}")
|
||||
|
||||
if __name__=="__main__":
|
||||
|
||||
FILE = "/app/media/users/1/subscriptions/33/requests/sbt_invoice/SAP00c6c229c2954e498b119968a318d366/temp_SAP00c6c229c2954e498b119968a318d366.jpg"
|
||||
|
||||
10
cope2n-fe/package-lock.json
generated
10
cope2n-fe/package-lock.json
generated
@ -25,6 +25,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "^4.5.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
@ -11407,6 +11408,15 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hotkeys-hook": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
|
||||
"integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.1",
|
||||
"react-dom": ">=16.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "11.18.6",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
|
||||
|
||||
@ -27,27 +27,28 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons": "^4.8.0",
|
||||
"@ant-design/plots": "^1.2.3",
|
||||
"@ant-design/pro-layout": "^7.10.3",
|
||||
"@babel/core": "^7.13.10",
|
||||
"@cyntler/react-doc-viewer": "^1.14.1",
|
||||
"@tanstack/react-query": "^4.20.4",
|
||||
"antd": "^5.4.0",
|
||||
"axios": "^1.2.2",
|
||||
"chart.js": "^4.4.1",
|
||||
"history": "^5.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mousetrap": "^1.6.5",
|
||||
"process": "^0.11.10",
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"styled-components": "^5.3.6",
|
||||
"uuid": "^9.0.0"
|
||||
"@ant-design/icons": "^4.8.0",
|
||||
"@ant-design/plots": "^1.2.3",
|
||||
"@ant-design/pro-layout": "^7.10.3",
|
||||
"@babel/core": "^7.13.10",
|
||||
"@cyntler/react-doc-viewer": "^1.14.1",
|
||||
"@tanstack/react-query": "^4.20.4",
|
||||
"antd": "^5.4.0",
|
||||
"axios": "^1.2.2",
|
||||
"chart.js": "^4.4.1",
|
||||
"history": "^5.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mousetrap": "^1.6.5",
|
||||
"process": "^0.11.10",
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "^4.5.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"styled-components": "^5.3.6",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-syntax-jsx": "^7.12.13",
|
||||
|
||||
@ -34,7 +34,7 @@ const columns: TableColumnsType<DataType> = [
|
||||
return String(record.subSidiaries).toUpperCase();
|
||||
},
|
||||
filters: [
|
||||
{ text: 'ALL', value: 'ALL' },
|
||||
{ text: 'SEAO', value: 'SEAO' },
|
||||
{ text: 'SEAU', value: 'SEAU' },
|
||||
{ text: 'SESP', value: 'SESP' },
|
||||
{ text: 'SME', value: 'SME' },
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"Back to Dashboard": "Back to Dashboard",
|
||||
"Create New Report": "Create New Report",
|
||||
"Dashboard": "Dashboard",
|
||||
"Date": "Date",
|
||||
"Date (GMT+8)": "Date (GMT+8)",
|
||||
"Download": "Download",
|
||||
"Download Report": "Download Report",
|
||||
"Duration": "Duration",
|
||||
@ -12,6 +12,7 @@
|
||||
"English": "English",
|
||||
"Go to Reports": "Go to Reports",
|
||||
"Inference": "Inference",
|
||||
"Is Test": "Is Test",
|
||||
"Language": "Language",
|
||||
"Login": "Login",
|
||||
"Logout": "Logout",
|
||||
@ -28,8 +29,11 @@
|
||||
"Please specify a password": "Please specify a password",
|
||||
"Please specify a username": "Please specify a username",
|
||||
"Report Details": "Report Details",
|
||||
"Report Filters": "Report Filters",
|
||||
"Reports": "Reports",
|
||||
"Retry": "Retry",
|
||||
"Review": "Review",
|
||||
"Reviewed": "Reviewed",
|
||||
"Service temporarily unavailable.": "Service temporarily unavailable.",
|
||||
"Something went wrong.": "Something went wrong.",
|
||||
"Sorry, something went wrong.": "Sorry, something went wrong.",
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"Back to Dashboard": "",
|
||||
"Create New Report": "",
|
||||
"Dashboard": "",
|
||||
"Date": "",
|
||||
"Date (GMT+8)": "",
|
||||
"Download": "",
|
||||
"Download Report": "",
|
||||
"Duration": "",
|
||||
@ -12,6 +12,7 @@
|
||||
"English": "Tiếng Anh",
|
||||
"Go to Reports": "",
|
||||
"Inference": "",
|
||||
"Is Test": "",
|
||||
"Language": "Ngôn ngữ",
|
||||
"Login": "Đăng nhập",
|
||||
"Logout": "Đăng xuất",
|
||||
@ -28,8 +29,11 @@
|
||||
"Please specify a password": "Vui lòng nhập một mật khẩu",
|
||||
"Please specify a username": "Vui lòng nhập một tên tài khoản",
|
||||
"Report Details": "",
|
||||
"Report Filters": "",
|
||||
"Reports": "",
|
||||
"Retry": "Thử lại",
|
||||
"Review": "",
|
||||
"Reviewed": "",
|
||||
"Service temporarily unavailable.": "Dịch vụ máy chủ hiện tại không sẵn sàng.",
|
||||
"Something went wrong.": "Có lỗi xảy ra",
|
||||
"Sorry, something went wrong.": "Hệ thống gặp lỗi",
|
||||
|
||||
@ -16,7 +16,7 @@ export interface ReportFormValues {
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const [duration, setDuration] = useState<string>('30d');
|
||||
const [subsidiary, setSubsidiary] = useState<string>('ALL');
|
||||
const [subsidiary, setSubsidiary] = useState<string>('SEAO');
|
||||
const [form] = Form.useForm<ReportFormValues>();
|
||||
const { isLoading, data } = useOverViewReport({
|
||||
duration: duration,
|
||||
@ -93,6 +93,7 @@ const Dashboard = () => {
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'ALL', label: 'ALL' },
|
||||
{ value: 'SEAO', label: 'SEAO' },
|
||||
{ value: 'SEAU', label: 'SEAU' },
|
||||
{ value: 'SESP', label: 'SESP' },
|
||||
{ value: 'SME', label: 'SME' },
|
||||
@ -100,7 +101,7 @@ const Dashboard = () => {
|
||||
{ value: 'TSE', label: 'TSE' },
|
||||
{ value: 'SEIN', label: 'SEIN' },
|
||||
]}
|
||||
defaultValue='ALL'
|
||||
defaultValue='SEAO'
|
||||
value={subsidiary}
|
||||
onChange={(value) => {
|
||||
setSubsidiary(value);
|
||||
|
||||
@ -112,7 +112,7 @@ const ReportsPage = () => {
|
||||
placeholder='Select a subsidiary'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'ALL', label: 'ALL' },
|
||||
{ value: 'SEAO', label: 'SEAO' },
|
||||
{ value: 'SEAU', label: 'SEAU' },
|
||||
{ value: 'SESP', label: 'SESP' },
|
||||
{ value: 'SME', label: 'SME' },
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
import { t } from '@lingui/macro';
|
||||
import { Button, message, Upload, Input, Table } from 'antd';
|
||||
import { SbtPageHeader } from 'components/page-header';
|
||||
import { useState } from 'react';
|
||||
import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Spin, message } from 'antd';
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
import type { GetRef } from 'antd';
|
||||
import { Layout } from 'antd';
|
||||
import {
|
||||
DownloadOutlined, CheckCircleOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
ClockCircleFilled,
|
||||
} from '@ant-design/icons';
|
||||
import FileViewer from '@cyntler/react-doc-viewer';
|
||||
import styled from 'styled-components';
|
||||
const { Sider, Content } = Layout;
|
||||
import { baseURL } from "request/api";
|
||||
import moment from 'moment';
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
|
||||
|
||||
const siderStyle: React.CSSProperties = {
|
||||
backgroundColor: '#fafafa',
|
||||
@ -13,61 +26,142 @@ const siderStyle: React.CSSProperties = {
|
||||
};
|
||||
|
||||
|
||||
const fileList = [
|
||||
{
|
||||
name: "invoice.pdf",
|
||||
url: "/dummpy.pdf",
|
||||
type: "invoice",
|
||||
isBadQuality: false,
|
||||
},
|
||||
{
|
||||
name: "invoice.pdf",
|
||||
url: "/dummpy.pdf",
|
||||
type: "imei",
|
||||
isBadQuality: true,
|
||||
const StyledTable = styled(Table)`
|
||||
& .sbt-table-cell {
|
||||
padding: 4px!important;
|
||||
}
|
||||
]
|
||||
`;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
value: 'Mike',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: 'Mike',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
value: 'Mike',
|
||||
},
|
||||
];
|
||||
type InputRef = GetRef<typeof Input>;
|
||||
type FormInstance<T> = GetRef<typeof Form<T>>;
|
||||
|
||||
const columns = [
|
||||
const EditableContext = React.createContext<FormInstance<any> | null>(null);
|
||||
|
||||
interface Item {
|
||||
key: string;
|
||||
accuracy: number;
|
||||
submitted: string;
|
||||
revised: string;
|
||||
action: string;
|
||||
}
|
||||
|
||||
interface EditableRowProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
|
||||
const [form] = Form.useForm();
|
||||
return (
|
||||
<Form form={form} component={false}>
|
||||
<EditableContext.Provider value={form}>
|
||||
<tr {...props} />
|
||||
</EditableContext.Provider>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
interface EditableCellProps {
|
||||
title: React.ReactNode;
|
||||
editable: boolean;
|
||||
children: React.ReactNode;
|
||||
dataIndex: keyof Item;
|
||||
record: Item;
|
||||
handleSave: (record: Item) => void;
|
||||
}
|
||||
|
||||
|
||||
const EditableCell: React.FC<EditableCellProps> = ({
|
||||
title,
|
||||
editable,
|
||||
children,
|
||||
dataIndex,
|
||||
record,
|
||||
handleSave,
|
||||
...restProps
|
||||
}) => {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
const form = useContext(EditableContext)!;
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) {
|
||||
inputRef.current!.focus();
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
const toggleEdit = () => {
|
||||
setEditing(!editing);
|
||||
form.setFieldsValue({ [dataIndex]: record[dataIndex] });
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
|
||||
toggleEdit();
|
||||
handleSave({ ...record, ...values });
|
||||
} catch (errInfo) {
|
||||
console.log('Save failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
let childNode = children;
|
||||
|
||||
if (editable) {
|
||||
childNode = editing ? (
|
||||
<Form.Item
|
||||
style={{ margin: 0 }}
|
||||
name={dataIndex}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `${title} is required.`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input ref={inputRef} onPressEnter={save} onBlur={save} />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <td {...restProps}>{childNode}</td>;
|
||||
};
|
||||
|
||||
// type EditableTableProps = Parameters<typeof Table>[0];
|
||||
|
||||
const defaultColumns = [
|
||||
{
|
||||
title: 'Key',
|
||||
dataIndex: 'key',
|
||||
key: 'key',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'Predicted',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
dataIndex: 'predicted',
|
||||
key: 'predicted',
|
||||
},
|
||||
{
|
||||
title: 'Submitted',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
dataIndex: 'submitted',
|
||||
key: 'submitted',
|
||||
},
|
||||
{
|
||||
title: 'Revised',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
dataIndex: 'revised',
|
||||
key: 'revised',
|
||||
editable: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const FileCard = ({ file, isSelected, onClick }) => {
|
||||
const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
|
||||
const fileName = file["File Name"];
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #ccc',
|
||||
@ -75,7 +169,10 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
backgroundColor: isSelected ? '#d4ecff' : '#fff',
|
||||
padding: '4px 8px',
|
||||
marginRight: '4px',
|
||||
marginTop: '4px',
|
||||
marginTop: '2px',
|
||||
position: 'relative',
|
||||
height: '100px',
|
||||
overflow: 'hidden',
|
||||
}} onClick={onClick}>
|
||||
<div>
|
||||
<span style={{
|
||||
@ -83,99 +180,644 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
}}>{file.type.toUpperCase()}</span>
|
||||
cursor: 'default',
|
||||
}}>{file["Doc Type"].toUpperCase()}</span>
|
||||
<span style={{
|
||||
fontSize: '12px',
|
||||
color: '#aaa',
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
}}>{file.name}</span>
|
||||
cursor: 'default',
|
||||
maxWidth: '50px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}>
|
||||
{fileName ? fileName.substring(0, 25).replace("temp_", "") : fileName}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
padding: '4px',
|
||||
position: 'absolute',
|
||||
bottom: 2,
|
||||
right: 2,
|
||||
}}>
|
||||
<Button style={{
|
||||
margin: '4px 2px',
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsReasonModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Review
|
||||
</Button>
|
||||
<Button style={{
|
||||
margin: '4px 2px',
|
||||
}} onClick={() => {
|
||||
const downloadUrl = file["File URL"];
|
||||
window.open(downloadUrl, '_blank');
|
||||
}}>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
const InferencePage = () => {
|
||||
const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
|
||||
const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0] : '';
|
||||
const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1] : '';
|
||||
let filterStr = "";
|
||||
filterStr += `page=${page}&page_size=${page_size}&`;
|
||||
if (filterSubsidiaries) {
|
||||
filterStr += `subsidiary=${filterSubsidiaries}&`;
|
||||
}
|
||||
if (filterReviewState) {
|
||||
filterStr += `is_reviewed=${filterReviewState}&`;
|
||||
}
|
||||
if (filterIncludeTests) {
|
||||
filterStr += `includes_test=${filterIncludeTests}&`;
|
||||
}
|
||||
if (startDate && endDate) {
|
||||
filterStr += `start_date=${startDate}&end_date=${endDate}&`;
|
||||
}
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
const data = await fetch(`${baseURL}/ctel/request_list/?${filterStr}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Authorization": `${JSON.parse(token)}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.json();
|
||||
return data;
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
const fetchRequest = async (id) => {
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
const response = await fetch(`${baseURL}/ctel/request/${id}/`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Authorization": `${JSON.parse(token)}`
|
||||
}
|
||||
});
|
||||
return await (await response.json()).subscription_requests[0];
|
||||
};
|
||||
|
||||
const ReviewPage = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
|
||||
const [selectedFileId, setSelectedFileId] = useState(0);
|
||||
const selectFileByIndex = (index) => {
|
||||
const [selectedFileData, setSelectedFileData] = useState(null);
|
||||
const [selectedFileName, setSelectedFileName] = useState(null);
|
||||
|
||||
// Default date range: 1 month ago to today
|
||||
const [filterDateRange, setFilterDateRange] = useState([
|
||||
"", ""
|
||||
]);
|
||||
|
||||
const [filterSubsidiaries, setFilterSubsidiaries] = useState('SEAO');
|
||||
const [filterReviewState, setFilterReviewState] = useState('all');
|
||||
const [filterIncludeTests, setFilterIncludesTests] = useState('true');
|
||||
const [requests, setRequests] = useState([]);
|
||||
const [currentRequest, setCurrentRequest] = useState(null);
|
||||
const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
|
||||
const [hasNextRequest, setHasNextRequest] = useState(true);
|
||||
const [totalRequests, setTotalPages] = useState(0);
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
|
||||
const [pageIndexToGoto, setPageIndexToGoto] = useState(1);
|
||||
|
||||
const setAndLoadSelectedFile = async (requestData, index) => {
|
||||
setSelectedFileId(index);
|
||||
if (!requestData["Files"][index]) {
|
||||
setSelectedFileData("FAILED_TO_LOAD_FILE");
|
||||
return;
|
||||
};
|
||||
const fileName = requestData["Files"][index]["File Name"];
|
||||
const fileURL = requestData["Files"][index]["File URL"];
|
||||
const response = await fetch(fileURL);
|
||||
if (response.status === 200) {
|
||||
setSelectedFileName(fileName);
|
||||
setSelectedFileData(fileURL);
|
||||
console.log("Loading file: " + fileName);
|
||||
console.log("URL: " + fileURL);
|
||||
} else {
|
||||
setSelectedFileData("FAILED_TO_LOAD_FILE");
|
||||
}
|
||||
};
|
||||
|
||||
const loadCurrentRequest = (requestID) => {
|
||||
setLoading(true);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => {
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
requestData.then(async (data) => {
|
||||
if (data) setCurrentRequest(data);
|
||||
const predicted = (data && data["Reviewed Result"]) ? data["Reviewed Result"] : {};
|
||||
const submitted = (data && data["Feedback Result"]) ? data["Feedback Result"] : {};
|
||||
const revised = (data && data["Reviewed Result"]) ? data["Reviewed Result"] : {};
|
||||
const keys = Object.keys(predicted);
|
||||
const tableRows = [];
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let instance = {};
|
||||
instance["key"] = keys[i];
|
||||
instance["predicted"] = predicted[keys[i]];
|
||||
instance["submitted"] = submitted[keys[i]];
|
||||
instance["revised"] = revised[keys[i]];
|
||||
tableRows.push(instance);
|
||||
}
|
||||
setDataSource(tableRows);
|
||||
setLoading(false);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const gotoNextRequest = () => {
|
||||
if (currentRequestIndex >= totalRequests) {
|
||||
return;
|
||||
}
|
||||
const nextRequestIndex = currentRequestIndex + 1;
|
||||
setCurrentRequestIndex(nextRequestIndex);
|
||||
loadCurrentRequest(nextRequestIndex);
|
||||
};
|
||||
|
||||
const gotoPreviousRequest = () => {
|
||||
if (currentRequestIndex === 1) {
|
||||
return;
|
||||
}
|
||||
const previousRequestIndex = currentRequestIndex - 1;
|
||||
setCurrentRequestIndex(previousRequestIndex);
|
||||
loadCurrentRequest(previousRequestIndex);
|
||||
};
|
||||
|
||||
const reloadFilters = () => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
firstRequest.then(async (data) => {
|
||||
if (data) setCurrentRequest(data);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
firstRequest.then(async (data) => {
|
||||
if (data) setCurrentRequest(data);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const components = {
|
||||
body: {
|
||||
row: EditableRow,
|
||||
cell: EditableCell,
|
||||
},
|
||||
};
|
||||
|
||||
// "Key", "Accuracy", "Submitted", "Revised"
|
||||
interface DataType {
|
||||
key: string;
|
||||
accuracy: number;
|
||||
submitted: string;
|
||||
revised: string;
|
||||
};
|
||||
|
||||
const updateRevisedData = async (newRevisedData: any) => {
|
||||
const requestID = newRevisedData.request_id;
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
await fetch(`${baseURL}/ctel/request/${requestID}/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Authorization": `${JSON.parse(token)}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"reviewed_result": newRevisedData
|
||||
}),
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
message.error("Could not update revised data");
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = (row: DataType) => {
|
||||
const newData = [...dataSource];
|
||||
const index = newData.findIndex((item) => row.key === item.key);
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, {
|
||||
...item,
|
||||
...row,
|
||||
});
|
||||
setDataSource(newData);
|
||||
const newRevisedData = {};
|
||||
for (let i = 0; i < newData.length; i++) {
|
||||
newRevisedData[newData[i].key] = newData[i].revised;
|
||||
}
|
||||
updateRevisedData(newRevisedData).then(() => {
|
||||
// "[Is Reviewed]" => true
|
||||
setCurrentRequest({
|
||||
...currentRequest,
|
||||
["Is Reviewed"]: true,
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const columns = defaultColumns.map((col) => {
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
return {
|
||||
...col,
|
||||
onCell: (record: DataType) => ({
|
||||
record,
|
||||
editable: col.key != "request_id" && col.editable,
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
handleSave,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
// use left/right keys to navigate
|
||||
useHotkeys("left", gotoPreviousRequest);
|
||||
useHotkeys("right", gotoNextRequest);
|
||||
|
||||
const fileExtension = selectedFileName ? selectedFileName.split('.').pop() : '';
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <SbtPageHeader
|
||||
title={t`Result Review`}
|
||||
/> */}
|
||||
<div style={fullscreen ? {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: '#fff',
|
||||
zIndex: 1000,
|
||||
} : {
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
}}>
|
||||
<div
|
||||
style={{ height: '100%', position: 'absolute', top: 0, left: 0, width: '100%', background: "#00000033", zIndex: 1000, display: loading ? 'block' : 'none' }}
|
||||
>
|
||||
<Spin spinning={true} style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
marginTop: -12,
|
||||
marginLeft: -12,
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
}} size='large' />
|
||||
</div>
|
||||
<div>
|
||||
<Button onClick={() => {
|
||||
setFullscreen(!fullscreen);
|
||||
}}>
|
||||
{fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
|
||||
</Button>
|
||||
{totalRequests ? <> <b>Request ID:</b> {currentRequest?.RequestID}</> : ""}
|
||||
</div>
|
||||
<Layout style={{
|
||||
overflow: 'hidden',
|
||||
overflow: 'auto',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
minHeight: 'calc(100vh - 100px)',
|
||||
maxHeight: 'calc(100vh - 100px)',
|
||||
minHeight: '70%',
|
||||
maxHeight: '70%',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
}}>
|
||||
<Content style={{
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
backgroundColor: '#efefef',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
}}>
|
||||
<div style={{
|
||||
border: "1px solid #ccc",
|
||||
flexGrow: 1,
|
||||
height: '500px',
|
||||
<Content style={{
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
backgroundColor: '#efefef',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
{totalRequests > 0 && <div
|
||||
style={{
|
||||
width: "200px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 0,
|
||||
}}>
|
||||
<FileViewer documents={
|
||||
[
|
||||
{ uri: "/dummy.pdf" }
|
||||
]
|
||||
} config={{
|
||||
header: {
|
||||
disableHeader: true,
|
||||
disableFileName: true,
|
||||
retainURLParams: true,
|
||||
},
|
||||
csvDelimiter: ",", // "," as default,
|
||||
pdfVerticalScrollByDefault: true, // false as default
|
||||
}} />
|
||||
</div>
|
||||
<div
|
||||
<h2
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100px",
|
||||
flexGrow: 0,
|
||||
}}>
|
||||
{fileList.map((file, index) => (
|
||||
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
|
||||
() => {
|
||||
setSelectedFileId(index);
|
||||
color: "#333",
|
||||
padding: 10,
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>Files ({currentRequest?.Files?.length})</h2>
|
||||
{currentRequest?.Files.map((file, index) => (
|
||||
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
|
||||
() => {
|
||||
setAndLoadSelectedFile(currentRequest, index);
|
||||
}
|
||||
} setIsReasonModalOpen={setIsReasonModalOpen} />
|
||||
))}
|
||||
</div>}
|
||||
<div style={{
|
||||
border: "1px solid #ccc",
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
}}>
|
||||
{selectedFileData === "FAILED_TO_LOAD_FILE" ? <p style={{ color: "#333" }}>Failed to load file.</p> : ( fileExtension === "pdf" ? (<FileViewer documents={[
|
||||
{ uri: selectedFileData }
|
||||
]} config={{
|
||||
header: {
|
||||
disableHeader: true,
|
||||
disableFileName: true,
|
||||
retainURLParams: true,
|
||||
},
|
||||
csvDelimiter: ",", // "," as default,
|
||||
pdfVerticalScrollByDefault: true, // false as default
|
||||
}} />) : <div style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
}}><img width={"100%"} src={selectedFileData} alt="file" /></div>)}
|
||||
</div>
|
||||
</Content>
|
||||
<Sider width="400px" style={siderStyle}>
|
||||
<Space.Compact style={{ width: '100%', marginBottom: 16 }}>
|
||||
<Input value={
|
||||
`Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0] + " to " + filterDateRange[1]) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
|
||||
} readOnly />
|
||||
<Button type="primary" size="large"
|
||||
onClick={() => {
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Filters
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
|
||||
<div>
|
||||
<Button type="default" style={{ height: 38 }}
|
||||
disabled={currentRequestIndex === 1}
|
||||
onClick={() => {
|
||||
gotoPreviousRequest();
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
Previou
|
||||
</Button>
|
||||
<Button type="default" style={{ height: 38 }}
|
||||
disabled={!hasNextRequest}
|
||||
onClick={() => {
|
||||
if (!hasNextRequest) {
|
||||
return;
|
||||
}
|
||||
} />
|
||||
))}
|
||||
gotoNextRequest();
|
||||
}}
|
||||
>
|
||||
Next
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
<Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
|
||||
<Button type="default"
|
||||
onClick={() => {
|
||||
if (pageIndexToGoto > totalRequests) {
|
||||
message.error("RequestID is out of range.");
|
||||
return;
|
||||
}
|
||||
if (pageIndexToGoto < 1) {
|
||||
message.error("RequestID is out of range.");
|
||||
return;
|
||||
}
|
||||
setCurrentRequestIndex(pageIndexToGoto);
|
||||
loadCurrentRequest(pageIndexToGoto);
|
||||
}}>
|
||||
Go to
|
||||
</Button>
|
||||
}
|
||||
value={pageIndexToGoto}
|
||||
onChange={e => {
|
||||
setPageIndexToGoto(parseInt(e.target.value));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Content>
|
||||
<Sider width="400px" style={siderStyle}>
|
||||
<h2 style={{ margin: "0 0 10px 0" }}>Overview</h2>
|
||||
<Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly />
|
||||
</div>
|
||||
<h2 style={{ margin: "20px 0 10px 0" }}>{totalRequests ? ("Request: " + currentRequestIndex + "/" + totalRequests) : "No Request. Adjust your search criteria to see more results."}</h2>
|
||||
{totalRequests > 0 && <div>
|
||||
<Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
|
||||
<Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
|
||||
<Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
|
||||
<Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
|
||||
<Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />
|
||||
<div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
|
||||
<Button type="primary" size='middle'>Confirm result</Button>
|
||||
{currentRequest && (currentRequest["Is Reviewed"] ? <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px" }}>
|
||||
Reviewed
|
||||
</Tag> : <Tag icon={<ClockCircleFilled />} color="warning" style={{ padding: "4px 16px" }}>
|
||||
Not Reviewed
|
||||
</Tag>)}
|
||||
</div>
|
||||
<Table dataSource={dataSource} columns={columns} />
|
||||
</Sider>
|
||||
</Layout>
|
||||
</>
|
||||
</div>}
|
||||
</Sider>
|
||||
</Layout>
|
||||
<Modal
|
||||
title={t`Report Filters`}
|
||||
open={isModalOpen}
|
||||
width={700}
|
||||
onOk={
|
||||
() => {
|
||||
setIsModalOpen(false);
|
||||
reloadFilters();
|
||||
}
|
||||
}
|
||||
onCancel={
|
||||
() => {
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
}
|
||||
>
|
||||
<Form
|
||||
style={{
|
||||
marginTop: 30,
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name='dateRange'
|
||||
label={t`Date (GMT+8)`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a date range',
|
||||
},
|
||||
]}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
onChange={(date, dateString) => {
|
||||
setFilterDateRange(dateString);
|
||||
}}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='subsidiary'
|
||||
label={t`Subsidiary`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a subsidiary',
|
||||
},
|
||||
]}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a subsidiary'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'SEAO', label: 'SEAO' },
|
||||
{ value: 'SEAU', label: 'SEAU' },
|
||||
{ value: 'SESP', label: 'SESP' },
|
||||
{ value: 'SME', label: 'SME' },
|
||||
{ value: 'SEPCO', label: 'SEPCO' },
|
||||
{ value: 'TSE', label: 'TSE' },
|
||||
{ value: 'SEIN', label: 'SEIN' },
|
||||
]}
|
||||
value={filterSubsidiaries}
|
||||
defaultValue={filterSubsidiaries}
|
||||
onChange={setFilterSubsidiaries}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div style={{ marginTop: 10, display: 'flex', marginLeft: 0, padding: 0 }}>
|
||||
<Form.Item
|
||||
name='reviewed'
|
||||
label={t`Reviewed`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select review status',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Reviewed', value: 'reviewed' },
|
||||
{ label: 'Not Reviewed', value: 'not_reviewed' },
|
||||
]}
|
||||
value={filterReviewState}
|
||||
defaultValue={filterReviewState}
|
||||
onChange={setFilterReviewState}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='is_test'
|
||||
label={t`Is Test`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select test status',
|
||||
},
|
||||
]}
|
||||
style={{ marginLeft: 16 }}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ label: 'Include tests', value: 'true' },
|
||||
{ label: 'Exclude tests', value: 'false' },
|
||||
]}
|
||||
value={filterIncludeTests}
|
||||
defaultValue={filterIncludeTests}
|
||||
onChange={setFilterIncludesTests}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
<Modal
|
||||
title={t`Review`}
|
||||
open={isReasonModalOpen}
|
||||
width={700}
|
||||
onOk={
|
||||
() => {
|
||||
|
||||
}
|
||||
}
|
||||
onCancel={
|
||||
() => {
|
||||
setIsReasonModalOpen(false);
|
||||
}
|
||||
}
|
||||
>
|
||||
{currentRequest && JSON.stringify(currentRequest["Files"][selectedFileId])}
|
||||
<Form
|
||||
style={{
|
||||
marginTop: 30,
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name='reason'
|
||||
label={t`Reason for bad quality:`}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a reason'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'invalid_image', label: t`Invalid image` },
|
||||
{ value: 'missing_information', label: t`Missing information` },
|
||||
{ value: 'too_blurry_text', label: t`Too blurry text` },
|
||||
{ value: 'too_small_text', label: t`Too small text` },
|
||||
{ value: 'handwritten', label: t`Handwritten` },
|
||||
{ value: 'recheck', label: t`Recheck` },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
{totalRequests > 0 && <div
|
||||
style={{
|
||||
height: '25%',
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<StyledTable components={components}
|
||||
rowClassName={() => 'editable-row'}
|
||||
bordered dataSource={dataSource} columns={columns}
|
||||
/>
|
||||
</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InferencePage;
|
||||
export default ReviewPage;
|
||||
|
||||
@ -11,7 +11,7 @@ const environment = process.env.NODE_ENV;
|
||||
const AXIOS_TIMEOUT_MS = 30 * 60 * 1000; // This config sastified long-live upload file request
|
||||
const EXPIRED_PASSWORD_SIGNAL = 'expired_password';
|
||||
|
||||
export const baseURL = environment === 'development' ? 'http://42.96.42.13:9000/api' : '/api';
|
||||
export const baseURL = environment === 'development' ? 'http://42.96.42.13:9881/api' : '/api';
|
||||
|
||||
export const API = axios.create({
|
||||
timeout: AXIOS_TIMEOUT_MS,
|
||||
|
||||
@ -123,7 +123,7 @@ export async function downloadReport(report_id: string, downloadFinishedCallback
|
||||
}
|
||||
|
||||
|
||||
export async function downloadDashboardReport(duration='30d', subsidiary='ALL') {
|
||||
export async function downloadDashboardReport(duration='30d', subsidiary='SEAO') {
|
||||
try {
|
||||
const response = await API.get(`/ctel/overview_download_file/?duration=${duration}&subsidiary=${subsidiary}`, {
|
||||
responseType: 'blob', // Important
|
||||
|
||||
Loading…
Reference in New Issue
Block a user