list dan show appointment
This commit is contained in:
pajri
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
|
||||
namespace Modules\Internal\Http\Controllers\Api;
|
||||
|
||||
use App\Helpers\Helper;
|
||||
use App\Models\OLDLMS\Appointment;
|
||||
use Illuminate\Contracts\Support\Renderable;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Routing\Controller;
|
||||
use Modules\Internal\Transformers\AppointmentResource;
|
||||
|
||||
class AppointmentController extends Controller
|
||||
{
|
||||
/**
|
||||
* Display a listing of the resource.
|
||||
* @return Renderable
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
$appointments = Appointment::query()
|
||||
->with('doctor.user', 'doctor.speciality', 'appointmentDetail', 'healthCare')
|
||||
->paginate(15);
|
||||
return response()->json(Helper::paginateResources(AppointmentResource::collection($appointments)));
|
||||
}
|
||||
/**
|
||||
* Show the form for creating a new resource.
|
||||
* @return Renderable
|
||||
*/
|
||||
public function create()
|
||||
{
|
||||
return view('internal::create');
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a newly created resource in storage.
|
||||
* @param Request $request
|
||||
* @return Renderable
|
||||
*/
|
||||
public function store(Request $request)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the specified resource.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function show($id)
|
||||
{
|
||||
$appointments = Appointment::query()
|
||||
->with('doctor.user', 'doctor.speciality', 'appointmentDetail', 'healthCare')
|
||||
->where('nID', $id)
|
||||
->first();
|
||||
return response()->json(new AppointmentResource($appointments));
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for editing the specified resource.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function edit($id)
|
||||
{
|
||||
return view('internal::edit');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the specified resource in storage.
|
||||
* @param Request $request
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function update(Request $request, $id)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the specified resource from storage.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function destroy($id)
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
89
Modules/Internal/Http/Controllers/Api/LivechatController.php
Normal file
89
Modules/Internal/Http/Controllers/Api/LivechatController.php
Normal file
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
|
||||
namespace Modules\Internal\Http\Controllers\Api;
|
||||
|
||||
use App\Helpers\Helper;
|
||||
use App\Models\OLDLMS\Livechat;
|
||||
use Illuminate\Contracts\Support\Renderable;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Routing\Controller;
|
||||
use Modules\Internal\Transformers\LivechatResource;
|
||||
|
||||
class LivechatController extends Controller
|
||||
{
|
||||
/**
|
||||
* Display a listing of the resource.
|
||||
* @return Renderable
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
$livechat = Livechat::with('doctor.user', 'doctor.speciality', 'appointment.appointmentDetail', 'healthCare')
|
||||
->where('nIDAppointment', '!=', null)->where('nIDAppointment', '!=', '')
|
||||
->paginate(15);
|
||||
|
||||
return response()->json(Helper::paginateResources(LivechatResource::collection($livechat)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for creating a new resource.
|
||||
* @return Renderable
|
||||
*/
|
||||
public function create()
|
||||
{
|
||||
return view('internal::create');
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a newly created resource in storage.
|
||||
* @param Request $request
|
||||
* @return Renderable
|
||||
*/
|
||||
public function store(Request $request)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the specified resource.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function show($id)
|
||||
{
|
||||
$livechat = Livechat::with('doctor.user', 'doctor.speciality', 'appointment.appointmentDetail', 'healthCare')
|
||||
->where('nIDAppointment', '!=', null)->where('nIDAppointment', '!=', '')
|
||||
->where('nID', $id)
|
||||
->first();
|
||||
return response()->json(new LivechatResource($livechat));
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for editing the specified resource.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function edit($id)
|
||||
{
|
||||
return view('internal::edit');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the specified resource in storage.
|
||||
* @param Request $request
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function update(Request $request, $id)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the specified resource from storage.
|
||||
* @param int $id
|
||||
* @return Renderable
|
||||
*/
|
||||
public function destroy($id)
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
use App\Http\Controllers\Api\MemberController as ApiMemberController;
|
||||
use Modules\Internal\Http\Controllers\Api\AuthController;
|
||||
use Illuminate\Http\Request;
|
||||
use Modules\Internal\Http\Controllers\Api\AppointmentController;
|
||||
use Modules\Internal\Http\Controllers\Api\BenefitController;
|
||||
use Modules\Internal\Http\Controllers\Api\ClaimController;
|
||||
use Modules\Internal\Http\Controllers\Api\CorporateBenefitController;
|
||||
@@ -17,6 +18,7 @@ use Modules\Internal\Http\Controllers\Api\DivisionController;
|
||||
use Modules\Internal\Http\Controllers\Api\DoctorController;
|
||||
use Modules\Internal\Http\Controllers\Api\DrugController;
|
||||
use Modules\Internal\Http\Controllers\Api\FormulariumController;
|
||||
use Modules\Internal\Http\Controllers\Api\LivechatController;
|
||||
use Modules\Internal\Http\Controllers\Api\MemberController;
|
||||
use Modules\Internal\Http\Controllers\Api\OrganizationController;
|
||||
use Modules\Internal\Http\Controllers\Api\PlanController;
|
||||
@@ -119,9 +121,12 @@ Route::prefix('internal')->group(function () {
|
||||
Route::get('search-organizations', [OrganizationController::class, 'searchOrganization']);
|
||||
Route::get('search-specialities', [SpecialityController::class, 'searchSpeciality']);
|
||||
Route::resource('organizations', OrganizationController::class);
|
||||
Route::resource('appointments', AppointmentController::class);
|
||||
Route::resource('live-chat', LivechatController::class);
|
||||
|
||||
Route::resource('doctors', DoctorController::class);
|
||||
|
||||
|
||||
|
||||
Route::get('generate-log/{member_id}', [CorporateMemberController::class, 'generateLog']);
|
||||
});
|
||||
|
||||
|
||||
45
Modules/Internal/Transformers/AppointmentResource.php
Normal file
45
Modules/Internal/Transformers/AppointmentResource.php
Normal file
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
|
||||
namespace Modules\Internal\Transformers;
|
||||
|
||||
use Carbon\Carbon;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
|
||||
class AppointmentResource extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource into an array.
|
||||
*
|
||||
* @param \Illuminate\Http\Request
|
||||
* @return array
|
||||
*/
|
||||
public function toArray($request)
|
||||
{
|
||||
$appointment = [
|
||||
'id' => $this->nID,
|
||||
'doctor_name' => isset($this->doctor->user->sFirstName) ? $this->doctor->user->sFirstName . ' ' . $this->doctor->user->sLastName : null,
|
||||
'speciality' => $this->doctor->speciality->sKeterangan,
|
||||
'date_appointment' => Carbon::parse($this->appointmentDetail->dTanggalAppointment)->format('d-m-Y') . ' ' . $this->appointmentDetail->tTimeAppointment,
|
||||
'date_created' => Carbon::parse($this->dCreateOn)->format('d-m-Y H:i:s') ?? null,
|
||||
'appointment_media' => $this->sMedia,
|
||||
'status' => $this->status_name,
|
||||
'health_care' => $this->healthCare->sHealthCare ?? null,
|
||||
'payment_method' => $this->payment_method ?? null,
|
||||
];
|
||||
|
||||
$payment_detail = null;
|
||||
if ($this->appointmentDetail->sPaymentDetails != null) {
|
||||
$payment_detail = [
|
||||
'payment_type' => $this->appointmentDetail->sPaymentDetails['payment_type'],
|
||||
'transaction_time' => $this->appointmentDetail->sPaymentDetails['transaction_time'],
|
||||
'gross_amount' => $this->appointmentDetail->sPaymentDetails['gross_amount'],
|
||||
'currency' => $this->appointmentDetail->sPaymentDetails['currency'],
|
||||
'status_message' => $this->appointmentDetail->sPaymentDetails['status_message'],
|
||||
];
|
||||
}
|
||||
|
||||
$appointment['payment_detail'] = $payment_detail;
|
||||
|
||||
return $appointment;
|
||||
}
|
||||
}
|
||||
62
Modules/Internal/Transformers/LivechatResource.php
Normal file
62
Modules/Internal/Transformers/LivechatResource.php
Normal file
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
namespace Modules\Internal\Transformers;
|
||||
|
||||
use Carbon\Carbon;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
|
||||
class LivechatResource extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource into an array.
|
||||
*
|
||||
* @param \Illuminate\Http\Request
|
||||
* @return array
|
||||
*/
|
||||
public function toArray($request)
|
||||
{
|
||||
$livechat = [
|
||||
'id' => $this->nID,
|
||||
'doctor_name' => isset($this->doctor->user->sFirstName) ? $this->doctor->user->sFirstName . ' ' . $this->doctor->user->sLastName : null,
|
||||
'speciality' => $this->doctor->speciality->sKeterangan ?? null,
|
||||
'health_care' => $this->healthCare->sHealthCare ?? null,
|
||||
'date_appointment' => Carbon::parse($this->appointment->appointmentDetail->dTanggalAppointment)->format('d-m-Y')
|
||||
. ' ' . $this->appointment->appointmentDetail->tTimeAppointment ?? null,
|
||||
'status_appointment' => $this->appointment->status_name ?? null,
|
||||
'date_created' => Carbon::parse($this->appointment->dCreateOn)->format('d-m-Y H:i:s') ?? null,
|
||||
'patient_media' => $this->sMedia ?? null,
|
||||
'doctor_media' => $this->sMediaDokter ?? null,
|
||||
'appointment_media' => $this->appointment->sMedia ?? null,
|
||||
'status_chat' => $this->status_name ?? null,
|
||||
'payment_method' => $this->appointment->payment_method ?? null,
|
||||
];
|
||||
|
||||
$start_time = $this->dStartTime;
|
||||
$end_time = $this->dEndTime;
|
||||
$data_duration = 0 . ' jam ' . 0 . ' menit ' . 0 . ' detik';
|
||||
if ($start_time != null && $end_time != null) {
|
||||
$duration = Carbon::parse($start_time)->diffInMinutes(Carbon::parse($end_time));
|
||||
$hours = floor($duration / 60);
|
||||
$minutes = $duration % 60;
|
||||
$seconds = ($duration - ($hours * 60) - $minutes) * 60;
|
||||
|
||||
$data_duration = $hours . ' jam ' . $minutes . ' menit ' . $seconds . ' detik';
|
||||
}
|
||||
|
||||
$livechat['duration'] = $data_duration;
|
||||
|
||||
$payment_detail = null;
|
||||
if ($this->appointment->appointmentDetail->sPaymentDetails != null) {
|
||||
$payment_detail = [
|
||||
'payment_type' => $this->appointment->appointmentDetail->sPaymentDetails['payment_type'],
|
||||
'transaction_time' => $this->appointment->appointmentDetail->sPaymentDetails['transaction_time'],
|
||||
'gross_amount' => $this->appointment->appointmentDetail->sPaymentDetails['gross_amount'],
|
||||
'currency' => $this->appointment->appointmentDetail->sPaymentDetails['currency'],
|
||||
'status_message' => $this->appointment->appointmentDetail->sPaymentDetails['status_message'],
|
||||
];
|
||||
}
|
||||
|
||||
$livechat['payment_detail'] = $payment_detail;
|
||||
return $livechat;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Models\OLDLMS;
|
||||
|
||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||
@@ -14,12 +15,85 @@ class Appointment extends Model
|
||||
const UPDATED_AT = 'dUpdateOn';
|
||||
const DELETED_AT = 'dDeleteOn';
|
||||
|
||||
public $sStatusNames = [
|
||||
0 => 'Menunggu Konfirmasi',
|
||||
1 => 'Diterima',
|
||||
2 => 'Ditolak',
|
||||
3 => 'Selesai',
|
||||
4 => 'Dibatalkan',
|
||||
];
|
||||
|
||||
public $sPaymentMethodName = [
|
||||
1 => 'Transfer Bank',
|
||||
2 => 'Kartu Kredit',
|
||||
3 => 'Dompet Digital',
|
||||
4 => 'Gerai Retail',
|
||||
5 => 'QRIS',
|
||||
];
|
||||
|
||||
protected $connection = 'oldlms';
|
||||
|
||||
protected $table = 'tx_appointment';
|
||||
|
||||
public function detail()
|
||||
protected $primaryKey = 'nID';
|
||||
|
||||
public $incrementing = false;
|
||||
|
||||
protected $keyType = 'string';
|
||||
|
||||
protected $fillable = [
|
||||
'nID',
|
||||
'nIDDokter',
|
||||
'nIDUser',
|
||||
'sStatus',
|
||||
'dCreateOn',
|
||||
'dUpdateOn',
|
||||
'dDeleteOn',
|
||||
];
|
||||
|
||||
|
||||
|
||||
protected $appends = [
|
||||
'status_name',
|
||||
'payment_method'
|
||||
];
|
||||
|
||||
protected function StatusName(): Attribute
|
||||
{
|
||||
return $this->hasOne(AppointmentDetail::class, '');
|
||||
return Attribute::make(
|
||||
get: function ($value) {
|
||||
return $this->sStatusNames[$this->sStatus] ?? '-';
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
protected function PaymentMethod(): Attribute
|
||||
{
|
||||
return Attribute::make(
|
||||
get: function ($value) {
|
||||
return $this->sPaymentMethodName[$this->sPaymentMethod] ?? '-';
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public function appointmentDetail()
|
||||
{
|
||||
return $this->hasOne(AppointmentDetail::class, 'nIDAppointment', 'nID');
|
||||
}
|
||||
|
||||
public function doctor()
|
||||
{
|
||||
return $this->belongsTo(Dokter::class, 'nIDDokter', 'nID');
|
||||
}
|
||||
|
||||
public function user()
|
||||
{
|
||||
return $this->belongsTo(User::class, 'nIDUser', 'nID');
|
||||
}
|
||||
|
||||
public function healthCare()
|
||||
{
|
||||
return $this->belongsTo(Healthcare::class, 'nIDHealthCare', 'nID');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,4 +8,19 @@ use Illuminate\Database\Eloquent\Model;
|
||||
class AppointmentDetail extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
const CREATED_AT = 'dCreateOn';
|
||||
const UPDATED_AT = 'dUpdateOn';
|
||||
const DELETED_AT = 'dDeleteOn';
|
||||
|
||||
protected $connection = 'oldlms';
|
||||
|
||||
protected $table = 'tx_appointment_detail';
|
||||
protected $casts = [
|
||||
'sPaymentDetails' => 'array',
|
||||
];
|
||||
public function appointment()
|
||||
{
|
||||
return $this->belongsTo(Appointment::class, 'nIDAppointment', 'nID');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,4 +24,14 @@ class Dokter extends Model
|
||||
{
|
||||
return $this->hasMany(JadwalDokter::class, 'nIDDokter', 'nID');
|
||||
}
|
||||
|
||||
public function user()
|
||||
{
|
||||
return $this->belongsTo(User::class, 'nIDUser', 'nID');
|
||||
}
|
||||
|
||||
public function speciality()
|
||||
{
|
||||
return $this->belongsTo(Speciality::class, 'nIDSpesialis', 'nID');
|
||||
}
|
||||
}
|
||||
|
||||
64
app/Models/OLDLMS/Livechat.php
Normal file
64
app/Models/OLDLMS/Livechat.php
Normal file
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models\OLDLMS;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Livechat extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
|
||||
public $sStatusNames = [
|
||||
0 => 'Menunggu Konfirmasi',
|
||||
1 => 'Diterima',
|
||||
2 => 'Ditolak',
|
||||
3 => 'Selesai',
|
||||
4 => 'Dibatalkan',
|
||||
];
|
||||
|
||||
const CREATED_AT = 'dCreateOn';
|
||||
const UPDATED_AT = 'dUpdateOn';
|
||||
const DELETED_AT = 'dDeleteOn';
|
||||
|
||||
protected $connection = 'oldlms';
|
||||
|
||||
protected $table = 'tx_livechat';
|
||||
|
||||
protected $appends = [
|
||||
'status_name',
|
||||
];
|
||||
|
||||
protected function StatusName(): Attribute
|
||||
{
|
||||
return Attribute::make(
|
||||
get: function ($value) {
|
||||
return $this->sStatusNames[$this->sStatus] ?? '-';
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public function user()
|
||||
{
|
||||
return $this->belongsTo(User::class, 'nIDUser', 'nID');
|
||||
}
|
||||
|
||||
public function doctor()
|
||||
{
|
||||
return $this->belongsTo(Dokter::class, 'nIDDokter', 'nID');
|
||||
}
|
||||
|
||||
|
||||
public function appointment()
|
||||
{
|
||||
return $this->belongsTo(Appointment::class, 'nIDAppointment', 'nID');
|
||||
}
|
||||
|
||||
public function healthCare()
|
||||
{
|
||||
return $this->belongsTo(Healthcare::class, 'nIDHealthCare', 'nID');
|
||||
}
|
||||
}
|
||||
26
app/Models/OLDLMS/Speciality.php
Normal file
26
app/Models/OLDLMS/Speciality.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models\OLDLMS;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Speciality extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
const CREATED_AT = 'dCreateOn';
|
||||
const UPDATED_AT = 'dUpdateOn';
|
||||
const DELETED_AT = 'dDeleteOn';
|
||||
|
||||
protected $connection = 'oldlms';
|
||||
|
||||
protected $table = 'tm_spesialis';
|
||||
|
||||
protected $primaryKey = 'nID';
|
||||
|
||||
public function dokter()
|
||||
{
|
||||
return $this->hasMany(Dokter::class, 'nIDSpesialis', 'nID');
|
||||
}
|
||||
}
|
||||
@@ -4,8 +4,17 @@ namespace App\Models\OLDLMS;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||
|
||||
class User extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
use HasFactory, SoftDeletes;
|
||||
|
||||
const CREATED_AT = 'dCreateOn';
|
||||
const UPDATED_AT = 'dUpdateOn';
|
||||
const DELETED_AT = 'dDeleteOn';
|
||||
|
||||
protected $connection = 'oldlms';
|
||||
|
||||
protected $table = 'tm_users';
|
||||
}
|
||||
|
||||
7
frontend/dashboard/.env.development
Executable file
7
frontend/dashboard/.env.development
Executable file
@@ -0,0 +1,7 @@
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
PORT=8083
|
||||
|
||||
REACT_APP_HOST_API_URL="http://localhost:8000"
|
||||
|
||||
VITE_API_URL="http://localhost:8000/api/internal"
|
||||
@@ -69,6 +69,13 @@ const navConfig = [
|
||||
title: 'CUSTOMER SERVICES',
|
||||
children: [{ title: 'Request', path: '/cs-request' }],
|
||||
},
|
||||
{
|
||||
title: 'REPORT',
|
||||
children: [
|
||||
{ title: 'Appointment', path: '/report/appointments' },
|
||||
{ title: 'Live Chat', path: '/report/live-chat' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'USER MANAGEMENT',
|
||||
path: '/users',
|
||||
|
||||
93
frontend/dashboard/src/pages/Report/Appointments/Create.tsx
Normal file
93
frontend/dashboard/src/pages/Report/Appointments/Create.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import Form from './Form';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import ButtonBack from '../../../components/ButtonBack';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/doctors/' + id).then((res) => {
|
||||
setCurrentPractitioner(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="Membership: Create a new Dokter">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<ButtonBack />
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
|
||||
links={[
|
||||
{ name: 'Master', href: '/master' },
|
||||
{
|
||||
name: 'Doctors',
|
||||
href: '/master/doctors',
|
||||
},
|
||||
{ name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Form
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentPractitioner={currentPractitioner}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
// const pageTitle = 'Create Data Dokter';
|
||||
// return (
|
||||
// <Page title={pageTitle}>
|
||||
// <Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
// <HeaderBreadcrumbs
|
||||
// heading={pageTitle}
|
||||
// links={[
|
||||
// {
|
||||
// name: 'Master',
|
||||
// href: '/master',
|
||||
// },
|
||||
// {
|
||||
// name: 'Dokter',
|
||||
// href: '/master/organizations/',
|
||||
// },
|
||||
// {
|
||||
// name: 'Create',
|
||||
// href: '/master/organizations/create/',
|
||||
// },
|
||||
// ]}
|
||||
// />
|
||||
|
||||
// <Grid container spacing={2}>
|
||||
// <Grid item xs={12}>
|
||||
// <Card sx={{ p: 2 }}>
|
||||
// <Form
|
||||
// isSubmitting={isSubmitting}
|
||||
// isEdit={isEdit}
|
||||
// currentOrganizations={currentOrganizations}
|
||||
// />
|
||||
// </Card>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Container>
|
||||
// </Page>
|
||||
// );
|
||||
// }
|
||||
260
frontend/dashboard/src/pages/Report/Appointments/Form.tsx
Normal file
260
frontend/dashboard/src/pages/Report/Appointments/Form.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
|
||||
import { Label, Rowing } from '@mui/icons-material';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Practitioner> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentPractitioner?: Practitioner;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function PractitionerForm({ isEdit, currentPractitioner }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [practitioner_group, setPractitionerGroups] = useState([]);
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentPractitioner?.id,
|
||||
name: currentPractitioner?.name || '',
|
||||
address: currentPractitioner?.address || '',
|
||||
birth_date: currentPractitioner?.birth_date || '',
|
||||
gender: currentPractitioner?.gender || '',
|
||||
description: currentPractitioner?.description || '',
|
||||
birth_place: currentPractitioner?.birth_place || '',
|
||||
active: currentPractitioner?.active === 1 ? true : false,
|
||||
avatar_url: currentPractitioner?.avatar_url || '',
|
||||
doctor_id: currentPractitioner?.doctor_id || '',
|
||||
organizations: currentPractitioner?.organizations || [],
|
||||
specialities: currentPractitioner?.specialities || [],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentPractitioner]
|
||||
);
|
||||
|
||||
console.log('defaultValues', defaultValues);
|
||||
|
||||
function StatusLabel({ value }: { value: boolean }) {
|
||||
return (
|
||||
<Chip
|
||||
label={value ? 'Aktif' : 'Tidak Aktif'}
|
||||
size="medium"
|
||||
sx={{
|
||||
backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
|
||||
color: value ? '#229A16' : '#B72136',
|
||||
padding: '1 8 1 8 px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentPractitioner) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentPractitioner]);
|
||||
|
||||
const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue('active', event.target.checked);
|
||||
|
||||
console.log('event.target.checked', event.target.checked);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('active', event.target.checked ? '1' : '0');
|
||||
formData.append('_method', 'PUT');
|
||||
axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||
|
||||
enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Dokter</Title>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={6}>
|
||||
{/* <Typography>Status Rumah Sakit</Typography> */}
|
||||
<RHFSwitch name="active" label="" onClick={handleActivate} />
|
||||
<StatusLabel value={values.active} />
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
<Title variant="h5">Informasi Umum</Title>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src={currentPractitioner?.avatar_url}
|
||||
sx={{ width: 120, height: 120, marginBottom: 2 }}
|
||||
/>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>{currentPractitioner?.name ? currentPractitioner?.name : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>No Telp</Span>
|
||||
<Text>{currentPractitioner?.phone ? currentPractitioner?.phone : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tempat Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_place ? currentPractitioner?.birth_place : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Alamat</Span>
|
||||
<Text>{currentPractitioner?.address ? currentPractitioner?.address : '-'}</Text>
|
||||
</Grid>
|
||||
<Grid item xs={5} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Jenis Kelamin</Span>
|
||||
<Text>{currentPractitioner?.gender ? currentPractitioner?.gender : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Email</Span>
|
||||
<Text>{currentPractitioner?.email ? currentPractitioner?.email : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_date ? currentPractitioner?.birth_date : '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Tempat Praktik</Title>
|
||||
{currentPractitioner?.organizations?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Spesialisasi</Title>
|
||||
{currentPractitioner?.specialities?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
35
frontend/dashboard/src/pages/Report/Appointments/Index.tsx
Normal file
35
frontend/dashboard/src/pages/Report/Appointments/Index.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Card, Grid, Container } from '@mui/material';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import Page from '../../../components/Page';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import List from './List';
|
||||
|
||||
export default function Doctors() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const pageTitle = 'Appointments';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Report',
|
||||
href: '/report',
|
||||
},
|
||||
{
|
||||
name: 'Appointments',
|
||||
href: '/report/appointments',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<List />
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
389
frontend/dashboard/src/pages/Report/Appointments/List.tsx
Normal file
389
frontend/dashboard/src/pages/Report/Appointments/List.tsx
Normal file
@@ -0,0 +1,389 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Paper,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Stack,
|
||||
ButtonGroup,
|
||||
Grid,
|
||||
Chip,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
FormControl,
|
||||
Autocomplete,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
|
||||
import {
|
||||
Link,
|
||||
NavLink as RouterLink,
|
||||
useSearchParams,
|
||||
useNavigate,
|
||||
useParams,
|
||||
} from 'react-router-dom';
|
||||
// hooks
|
||||
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import { Icd } from '../../../@types/diagnosis';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import CreateIcon from '@mui/icons-material/Create';
|
||||
import { Props } from '../../../components/editor/index';
|
||||
import { red } from '@mui/material/colors';
|
||||
import { margin, padding } from '@mui/system';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { Controller } from 'react-hook-form';
|
||||
|
||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
||||
import { GridSearchIcon } from '@mui/x-data-grid';
|
||||
import { Search } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function List() {
|
||||
// Generate the every row of the table
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { organization_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
|
||||
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
|
||||
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
|
||||
|
||||
function Filter(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
//handle search
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
props.onSearch(searchText);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
const item = [
|
||||
{
|
||||
id: '',
|
||||
value: '',
|
||||
name: 'Semua',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearchSubmit(event);
|
||||
}
|
||||
}}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
placeholder: 'Search',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterForm(props: any) {
|
||||
// IMPORT
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Filter onSearch={applyItems} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
function createData(doctor: Practitioner): Practitioner {
|
||||
return {
|
||||
...doctor,
|
||||
};
|
||||
}
|
||||
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [openDialog, setOpenDialog] = React.useState(false);
|
||||
|
||||
const handleDelete = (model: any) => {
|
||||
axios
|
||||
.delete(`/doctors/${row.id}`)
|
||||
.then((res) => {
|
||||
setDataTableData({
|
||||
...dataTableData,
|
||||
data: dataTableData.data.filter((model) => model.id != row.id),
|
||||
});
|
||||
enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
|
||||
})
|
||||
.catch((error) => {
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow>
|
||||
<TableCell />
|
||||
<TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
|
||||
<TableCell align="left">{row.date_appointment ? row.date_appointment : '-'}</TableCell>
|
||||
<TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
|
||||
<TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
|
||||
<TableCell align="left">{row.speciality ? row.speciality : '-'}</TableCell>
|
||||
<TableCell align="left">{row.appointment_media ? row.appointment_media : '-'}</TableCell>
|
||||
|
||||
<TableCell align="left">{row.status ? row.status : '-'}</TableCell>
|
||||
<TableCell align="center">
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/report/appointments/' + row.id + '/show'}>
|
||||
<Button>
|
||||
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</Link>
|
||||
</ButtonGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={() => {
|
||||
setOpenDialog(false);
|
||||
}}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogContent sx={{ p: 5 }}>
|
||||
<Icon
|
||||
icon="eva:trash-2-outline"
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
color: '#FF0000',
|
||||
margin: 'auto',
|
||||
display: 'block',
|
||||
marginBottom: '20px',
|
||||
alignContent: 'center',
|
||||
}}
|
||||
/>
|
||||
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
|
||||
Apakah anda yakin ingin menghapus
|
||||
</DialogContentText>
|
||||
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
|
||||
{row.name}?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setOpenDialog(false);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleDelete(row.id);
|
||||
}}
|
||||
color="primary"
|
||||
autoFocus
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||
current_page: 1,
|
||||
data: [],
|
||||
path: '',
|
||||
first_page_url: '',
|
||||
last_page: 1,
|
||||
last_page_url: '',
|
||||
next_page_url: '',
|
||||
prev_page_url: '',
|
||||
per_page: 10,
|
||||
from: 0,
|
||||
to: 0,
|
||||
total: 0,
|
||||
});
|
||||
const [dataTablePage, setDataTablePage] = useState(5);
|
||||
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/appointments', {
|
||||
params: filter,
|
||||
});
|
||||
setDataTableLoading(false);
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
// const applyFilter = async (searchFilter: string) => {
|
||||
// await loadDataTableData({ search: searchFilter });
|
||||
// setSearchParams({ search: searchFilter });
|
||||
// };
|
||||
|
||||
const applyItems = async (
|
||||
searchFilter: string,
|
||||
searchFilterOrganization: string,
|
||||
searchFilterSpecialities: string
|
||||
) => {
|
||||
await loadDataTableData({
|
||||
search: searchFilter,
|
||||
organization_id: searchFilterOrganization,
|
||||
speciality_id: searchFilterSpecialities,
|
||||
});
|
||||
setSearchParamsFilter({
|
||||
search: searchFilter,
|
||||
organization_id: searchFilterOrganization,
|
||||
speciality_id: searchFilterSpecialities,
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (event: ChangeEvent, value: number) => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
{/* <Ambulace /> */}
|
||||
|
||||
<Card sx={{ marginTop: '30px' }}>
|
||||
<FilterForm sx={{ marginTop: '100px' }} />
|
||||
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell style={headStyle} align="left" />
|
||||
<TableCell style={headStyle} align="left">
|
||||
Tanggal Booking
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Tanggal Appointment
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Faskes
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Nama Dokter
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Spesialisasi
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Appointment Via App/Website
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Status Appointment
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left" />
|
||||
|
||||
{/* <TableCell style={headStyle} align="center">
|
||||
Aksi
|
||||
</TableCell> */}
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length == 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
53
frontend/dashboard/src/pages/Report/Appointments/Show.tsx
Normal file
53
frontend/dashboard/src/pages/Report/Appointments/Show.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import View from './View';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/appointments/' + id).then((res) => {
|
||||
setCurrentAppointment(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="Appointment">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Appointment' : 'Appointment'}
|
||||
links={[
|
||||
{ name: 'Report', href: '/report' },
|
||||
{
|
||||
name: 'Appointments',
|
||||
href: '/report/appointments',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<View
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentAppointment={currentAppointment}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
275
frontend/dashboard/src/pages/Report/Appointments/View.tsx
Normal file
275
frontend/dashboard/src/pages/Report/Appointments/View.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
Badge,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
|
||||
import { Label, Rowing, Spa } from '@mui/icons-material';
|
||||
import { border } from '@mui/system';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Appointment> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentAppointment?: Appointment;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function AppointmentForm({ isEdit, currentAppointment }: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentAppointment?.id,
|
||||
name: currentAppointment?.name || '',
|
||||
address: currentAppointment?.address || '',
|
||||
birth_date: currentAppointment?.birth_date || '',
|
||||
gender: currentAppointment?.gender || '',
|
||||
description: currentAppointment?.description || '',
|
||||
birth_place: currentAppointment?.birth_place || '',
|
||||
active: currentAppointment?.active === 1 ? true : false,
|
||||
avatar_url: currentAppointment?.avatar_url || '',
|
||||
doctor_id: currentAppointment?.doctor_id || '',
|
||||
organizations: currentAppointment?.organizations || [],
|
||||
specialities: currentAppointment?.specialities || [],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentAppointment]
|
||||
);
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentAppointment) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentAppointment]);
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Stack
|
||||
direction="row"
|
||||
divider={<Divider orientation="vertical" flexItem />}
|
||||
spacing={2}
|
||||
>
|
||||
<Title>Data Appointment</Title>
|
||||
<Chip label={currentAppointment?.status} variant="outlined" />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Booking :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_created ? currentAppointment?.date_created : '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Appointment :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_appointment
|
||||
? currentAppointment?.date_appointment
|
||||
: '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>
|
||||
{currentAppointment?.doctor_name ? currentAppointment?.doctor_name : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Faskes</Span>
|
||||
<Text>
|
||||
{currentAppointment?.health_care ? currentAppointment?.health_care : '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Spesialis</Span>
|
||||
<Text>{currentAppointment?.speciality ? currentAppointment?.speciality : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Appointment Via Web/App</Span>
|
||||
<Text>
|
||||
{currentAppointment?.appointment_media
|
||||
? currentAppointment?.appointment_media
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ mt: 5, p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Pembayaran</Title>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
{currentAppointment?.payment_detail !== null ? (
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Metode Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_method ? currentAppointment?.payment_method : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Harga</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.gross_amount
|
||||
? currentAppointment?.payment_detail?.gross_amount
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Mata Uang</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.currency
|
||||
? currentAppointment?.payment_detail?.currency
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tipe Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.payment_type
|
||||
? currentAppointment?.payment_detail?.payment_type
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Waktu Transaksi</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.transaction_time
|
||||
? currentAppointment?.payment_detail?.transaction_time
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Status</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.status_message
|
||||
? currentAppointment?.payment_detail?.status_message
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : (
|
||||
<Span>Belum ada pembayaran</Span>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
93
frontend/dashboard/src/pages/Report/Livechat/Create.tsx
Normal file
93
frontend/dashboard/src/pages/Report/Livechat/Create.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import Form from './Form';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import ButtonBack from '../../../components/ButtonBack';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/doctors/' + id).then((res) => {
|
||||
setCurrentPractitioner(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="Membership: Create a new Dokter">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<ButtonBack />
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
|
||||
links={[
|
||||
{ name: 'Master', href: '/master' },
|
||||
{
|
||||
name: 'Doctors',
|
||||
href: '/master/doctors',
|
||||
},
|
||||
{ name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Form
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentPractitioner={currentPractitioner}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
// const pageTitle = 'Create Data Dokter';
|
||||
// return (
|
||||
// <Page title={pageTitle}>
|
||||
// <Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
// <HeaderBreadcrumbs
|
||||
// heading={pageTitle}
|
||||
// links={[
|
||||
// {
|
||||
// name: 'Master',
|
||||
// href: '/master',
|
||||
// },
|
||||
// {
|
||||
// name: 'Dokter',
|
||||
// href: '/master/organizations/',
|
||||
// },
|
||||
// {
|
||||
// name: 'Create',
|
||||
// href: '/master/organizations/create/',
|
||||
// },
|
||||
// ]}
|
||||
// />
|
||||
|
||||
// <Grid container spacing={2}>
|
||||
// <Grid item xs={12}>
|
||||
// <Card sx={{ p: 2 }}>
|
||||
// <Form
|
||||
// isSubmitting={isSubmitting}
|
||||
// isEdit={isEdit}
|
||||
// currentOrganizations={currentOrganizations}
|
||||
// />
|
||||
// </Card>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Container>
|
||||
// </Page>
|
||||
// );
|
||||
// }
|
||||
260
frontend/dashboard/src/pages/Report/Livechat/Form.tsx
Normal file
260
frontend/dashboard/src/pages/Report/Livechat/Form.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
|
||||
import { Label, Rowing } from '@mui/icons-material';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Practitioner> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentPractitioner?: Practitioner;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function PractitionerForm({ isEdit, currentPractitioner }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [practitioner_group, setPractitionerGroups] = useState([]);
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentPractitioner?.id,
|
||||
name: currentPractitioner?.name || '',
|
||||
address: currentPractitioner?.address || '',
|
||||
birth_date: currentPractitioner?.birth_date || '',
|
||||
gender: currentPractitioner?.gender || '',
|
||||
description: currentPractitioner?.description || '',
|
||||
birth_place: currentPractitioner?.birth_place || '',
|
||||
active: currentPractitioner?.active === 1 ? true : false,
|
||||
avatar_url: currentPractitioner?.avatar_url || '',
|
||||
doctor_id: currentPractitioner?.doctor_id || '',
|
||||
organizations: currentPractitioner?.organizations || [],
|
||||
specialities: currentPractitioner?.specialities || [],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentPractitioner]
|
||||
);
|
||||
|
||||
console.log('defaultValues', defaultValues);
|
||||
|
||||
function StatusLabel({ value }: { value: boolean }) {
|
||||
return (
|
||||
<Chip
|
||||
label={value ? 'Aktif' : 'Tidak Aktif'}
|
||||
size="medium"
|
||||
sx={{
|
||||
backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
|
||||
color: value ? '#229A16' : '#B72136',
|
||||
padding: '1 8 1 8 px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentPractitioner) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentPractitioner]);
|
||||
|
||||
const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue('active', event.target.checked);
|
||||
|
||||
console.log('event.target.checked', event.target.checked);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('active', event.target.checked ? '1' : '0');
|
||||
formData.append('_method', 'PUT');
|
||||
axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||
|
||||
enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Dokter</Title>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={6}>
|
||||
{/* <Typography>Status Rumah Sakit</Typography> */}
|
||||
<RHFSwitch name="active" label="" onClick={handleActivate} />
|
||||
<StatusLabel value={values.active} />
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
<Title variant="h5">Informasi Umum</Title>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src={currentPractitioner?.avatar_url}
|
||||
sx={{ width: 120, height: 120, marginBottom: 2 }}
|
||||
/>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>{currentPractitioner?.name ? currentPractitioner?.name : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>No Telp</Span>
|
||||
<Text>{currentPractitioner?.phone ? currentPractitioner?.phone : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tempat Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_place ? currentPractitioner?.birth_place : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Alamat</Span>
|
||||
<Text>{currentPractitioner?.address ? currentPractitioner?.address : '-'}</Text>
|
||||
</Grid>
|
||||
<Grid item xs={5} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Jenis Kelamin</Span>
|
||||
<Text>{currentPractitioner?.gender ? currentPractitioner?.gender : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Email</Span>
|
||||
<Text>{currentPractitioner?.email ? currentPractitioner?.email : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_date ? currentPractitioner?.birth_date : '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Tempat Praktik</Title>
|
||||
{currentPractitioner?.organizations?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Spesialisasi</Title>
|
||||
{currentPractitioner?.specialities?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
35
frontend/dashboard/src/pages/Report/Livechat/Index.tsx
Normal file
35
frontend/dashboard/src/pages/Report/Livechat/Index.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Card, Grid, Container } from '@mui/material';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import Page from '../../../components/Page';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import List from './List';
|
||||
|
||||
export default function Doctors() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const pageTitle = 'Live Chat';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Report',
|
||||
href: '/report',
|
||||
},
|
||||
{
|
||||
name: 'Live Chat',
|
||||
href: '/report/live-chat',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<List />
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
466
frontend/dashboard/src/pages/Report/Livechat/List.tsx
Normal file
466
frontend/dashboard/src/pages/Report/Livechat/List.tsx
Normal file
@@ -0,0 +1,466 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Paper,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Stack,
|
||||
ButtonGroup,
|
||||
Grid,
|
||||
Chip,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
FormControl,
|
||||
Autocomplete,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
|
||||
import {
|
||||
Link,
|
||||
NavLink as RouterLink,
|
||||
useSearchParams,
|
||||
useNavigate,
|
||||
useParams,
|
||||
} from 'react-router-dom';
|
||||
// hooks
|
||||
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import { Icd } from '../../../@types/diagnosis';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import CreateIcon from '@mui/icons-material/Create';
|
||||
import { Props } from '../../../components/editor/index';
|
||||
import { red } from '@mui/material/colors';
|
||||
import { margin, padding } from '@mui/system';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { Controller } from 'react-hook-form';
|
||||
|
||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
||||
import { GridSearchIcon } from '@mui/x-data-grid';
|
||||
import { Search } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function List() {
|
||||
// Generate the every row of the table
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { organization_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
|
||||
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
|
||||
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
|
||||
|
||||
function Filter(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
//handle search
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
props.onSearch(searchText);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
const item = [
|
||||
{
|
||||
id: '',
|
||||
value: '',
|
||||
name: 'Semua',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearchSubmit(event);
|
||||
}
|
||||
}}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
placeholder: 'Search',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterForm(props: any) {
|
||||
// IMPORT
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Filter onSearch={applyItems} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
function createData(doctor: Practitioner): Practitioner {
|
||||
return {
|
||||
...doctor,
|
||||
};
|
||||
}
|
||||
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [openDialog, setOpenDialog] = React.useState(false);
|
||||
|
||||
const handleDelete = (model: any) => {
|
||||
axios
|
||||
.delete(`/doctors/${row.id}`)
|
||||
.then((res) => {
|
||||
setDataTableData({
|
||||
...dataTableData,
|
||||
data: dataTableData.data.filter((model) => model.id != row.id),
|
||||
});
|
||||
enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
|
||||
})
|
||||
.catch((error) => {
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
|
||||
<TableCell align="left">{row.date_appointment ? row.date_appointment : '-'}</TableCell>
|
||||
<TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
|
||||
<TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
|
||||
<TableCell align="left">{row.speciality ? row.speciality : '-'}</TableCell>
|
||||
<TableCell align="left">{row.appointment_media ? row.appointment_media : '-'}</TableCell>
|
||||
<TableCell align="left">{row.patient_media ? row.patient_media : '-'}</TableCell>
|
||||
<TableCell align="left">{row.doctor_media ? row.doctor_media : '-'}</TableCell>
|
||||
<TableCell align="left">
|
||||
{row.status_appointment ? row.status_appointment : '-'}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.status_chat ? row.status_chat : '-'}</TableCell>
|
||||
<TableCell align="center">
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/report/live-chat/' + row.id + '/show'}>
|
||||
<Button>
|
||||
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</Link>
|
||||
</ButtonGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
<TableCell
|
||||
style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
|
||||
colSpan={6}
|
||||
>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box sx={{ margin: 1, pb: 2, pl: 4 }}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} sx={{ padding: 2 }}>
|
||||
<Grid container>
|
||||
<Grid item xs={6}>
|
||||
Metode Pembayaran
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
: {row.payment_method ? row.payment_method : '-'}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
Jenis Benefit
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
: -
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
Durasi
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
: {row.duration ? row.duration : '-'}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* END COLLAPSIBLE ROW */}
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={() => {
|
||||
setOpenDialog(false);
|
||||
}}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogContent sx={{ p: 5 }}>
|
||||
<Icon
|
||||
icon="eva:trash-2-outline"
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
color: '#FF0000',
|
||||
margin: 'auto',
|
||||
display: 'block',
|
||||
marginBottom: '20px',
|
||||
alignContent: 'center',
|
||||
}}
|
||||
/>
|
||||
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
|
||||
Apakah anda yakin ingin menghapus
|
||||
</DialogContentText>
|
||||
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
|
||||
{row.name}?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setOpenDialog(false);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleDelete(row.id);
|
||||
}}
|
||||
color="primary"
|
||||
autoFocus
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||
current_page: 1,
|
||||
data: [],
|
||||
path: '',
|
||||
first_page_url: '',
|
||||
last_page: 1,
|
||||
last_page_url: '',
|
||||
next_page_url: '',
|
||||
prev_page_url: '',
|
||||
per_page: 10,
|
||||
from: 0,
|
||||
to: 0,
|
||||
total: 0,
|
||||
});
|
||||
const [dataTablePage, setDataTablePage] = useState(5);
|
||||
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/live-chat', {
|
||||
params: filter,
|
||||
});
|
||||
setDataTableLoading(false);
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
// const applyFilter = async (searchFilter: string) => {
|
||||
// await loadDataTableData({ search: searchFilter });
|
||||
// setSearchParams({ search: searchFilter });
|
||||
// };
|
||||
|
||||
const applyItems = async (
|
||||
searchFilter: string,
|
||||
searchFilterOrganization: string,
|
||||
searchFilterSpecialities: string
|
||||
) => {
|
||||
await loadDataTableData({
|
||||
search: searchFilter,
|
||||
organization_id: searchFilterOrganization,
|
||||
speciality_id: searchFilterSpecialities,
|
||||
});
|
||||
setSearchParamsFilter({
|
||||
search: searchFilter,
|
||||
organization_id: searchFilterOrganization,
|
||||
speciality_id: searchFilterSpecialities,
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (event: ChangeEvent, value: number) => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
{/* <Ambulace /> */}
|
||||
|
||||
<Card sx={{ marginTop: '30px' }}>
|
||||
<FilterForm sx={{ marginTop: '100px' }} />
|
||||
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
{/* <TableCell colSpan={8} rowSpan={1} align="center" /> */}
|
||||
<TableCell style={headStyle} align="left" />
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Tanggal Booking
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Tanggal Appointment
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Faskes
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Nama Dokter
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Spesialisasi
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Appointment Via App/Website
|
||||
</TableCell>
|
||||
<TableCell
|
||||
colSpan={2}
|
||||
style={headStyle}
|
||||
align="center"
|
||||
sx={{ borderBottom: '3px solid #d7d7d7' }}
|
||||
>
|
||||
Chat Via App/Website
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Status Appointment
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Status Chat
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={headStyle} align="left" />
|
||||
{/* <TableCell style={headStyle} align="left">
|
||||
Tanggal Booking
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Tanggal Appointment
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Faskes
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Nama Dokter
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Spesialisasi
|
||||
</TableCell> */}
|
||||
<TableCell style={headStyle} align="left">
|
||||
Pasien
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Dokter
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length == 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
53
frontend/dashboard/src/pages/Report/Livechat/Show.tsx
Normal file
53
frontend/dashboard/src/pages/Report/Livechat/Show.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import View from './View';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/live-chat/' + id).then((res) => {
|
||||
setCurrentAppointment(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="Live Chat">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Live Chat' : 'Live Chat'}
|
||||
links={[
|
||||
{ name: 'Report', href: '/report' },
|
||||
{
|
||||
name: 'Live Chat',
|
||||
href: '/report/live-chat',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<View
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentAppointment={currentAppointment}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
309
frontend/dashboard/src/pages/Report/Livechat/View.tsx
Normal file
309
frontend/dashboard/src/pages/Report/Livechat/View.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
Badge,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
|
||||
import { Label, Rowing, Spa } from '@mui/icons-material';
|
||||
import { border, padding } from '@mui/system';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Appointment> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentAppointment?: Appointment;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function AppointmentForm({ isEdit, currentAppointment }: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentAppointment?.id,
|
||||
name: currentAppointment?.name || '',
|
||||
address: currentAppointment?.address || '',
|
||||
birth_date: currentAppointment?.birth_date || '',
|
||||
gender: currentAppointment?.gender || '',
|
||||
description: currentAppointment?.description || '',
|
||||
birth_place: currentAppointment?.birth_place || '',
|
||||
active: currentAppointment?.active === 1 ? true : false,
|
||||
avatar_url: currentAppointment?.avatar_url || '',
|
||||
doctor_id: currentAppointment?.doctor_id || '',
|
||||
organizations: currentAppointment?.organizations || [],
|
||||
specialities: currentAppointment?.specialities || [],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentAppointment]
|
||||
);
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentAppointment) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentAppointment]);
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Stack
|
||||
direction="row"
|
||||
divider={<Divider orientation="vertical" flexItem />}
|
||||
spacing={2}
|
||||
>
|
||||
<Title>Data Live Chat</Title>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2} alignItems="center">
|
||||
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
||||
Status Appointment :
|
||||
</Span>
|
||||
<Chip
|
||||
label={
|
||||
currentAppointment?.status_appointment
|
||||
? currentAppointment?.status_appointment
|
||||
: '-'
|
||||
}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2} alignItems="center">
|
||||
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
||||
Status Chat :
|
||||
</Span>
|
||||
<Chip
|
||||
label={
|
||||
currentAppointment?.status_chat ? currentAppointment?.status_chat : '-'
|
||||
}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{ marginTop: '20px' }}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Booking :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_created ? currentAppointment?.date_created : '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Appointment :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_appointment
|
||||
? currentAppointment?.date_appointment
|
||||
: '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>
|
||||
{currentAppointment?.doctor_name ? currentAppointment?.doctor_name : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Faskes</Span>
|
||||
<Text>
|
||||
{currentAppointment?.health_care ? currentAppointment?.health_care : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Durasi</Span>
|
||||
<Text>{currentAppointment?.duration ? currentAppointment?.duration : '-'}</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Spesialis</Span>
|
||||
<Text>{currentAppointment?.speciality ? currentAppointment?.speciality : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Appointment Via Web/App</Span>
|
||||
<Text>
|
||||
{currentAppointment?.appointment_media
|
||||
? currentAppointment?.appointment_media
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ mt: 5, p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Pembayaran</Title>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
{currentAppointment?.payment_detail !== null ? (
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Metode Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_method ? currentAppointment?.payment_method : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Harga</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.gross_amount
|
||||
? currentAppointment?.payment_detail?.gross_amount
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Mata Uang</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.currency
|
||||
? currentAppointment?.payment_detail?.currency
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tipe Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.payment_type
|
||||
? currentAppointment?.payment_detail?.payment_type
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Waktu Transaksi</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.transaction_time
|
||||
? currentAppointment?.payment_detail?.transaction_time
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Status</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.status_message
|
||||
? currentAppointment?.payment_detail?.status_message
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : (
|
||||
<Span>Belum ada pembayaran</Span>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -217,6 +217,39 @@ export default function Router() {
|
||||
element: <MasterFormulariumCreate />,
|
||||
},
|
||||
|
||||
{
|
||||
path: 'report/appointments',
|
||||
element: <Appointment />,
|
||||
},
|
||||
{
|
||||
path: 'report/appointments/:id',
|
||||
element: <AppointmentCreate />,
|
||||
},
|
||||
{
|
||||
path: 'report/appointments/:id/show',
|
||||
element: <AppointmentShow />,
|
||||
},
|
||||
{
|
||||
path: 'report/appointments/:id/edit',
|
||||
element: <AppointmentCreate />,
|
||||
},
|
||||
{
|
||||
path: 'report/live-chat',
|
||||
element: <Livechat />,
|
||||
},
|
||||
{
|
||||
path: 'report/live-chat/:id',
|
||||
element: <LivechatCreate />,
|
||||
},
|
||||
{
|
||||
path: 'report/live-chat/:id/show',
|
||||
element: <LivechatShow />,
|
||||
},
|
||||
{
|
||||
path: 'report/live-chat/:id/edit',
|
||||
element: <LivechatCreate />,
|
||||
},
|
||||
|
||||
{
|
||||
path: 'claims',
|
||||
element: <Claims />,
|
||||
@@ -322,6 +355,14 @@ const MasterDiagnosis = Loadable(lazy(() => import('../pages/Master/Diagnosis/In
|
||||
const MasterDoctors = Loadable(lazy(() => import('../pages/Master/Doctors/Index')));
|
||||
const MasterHospitals = Loadable(lazy(() => import('../pages/Master/Hospitals/Index')));
|
||||
|
||||
const Appointment = Loadable(lazy(() => import('../pages/Report/Appointments/Index')));
|
||||
const AppointmentCreate = Loadable(lazy(() => import('../pages/Report/Appointments/Create')));
|
||||
const AppointmentShow = Loadable(lazy(() => import('../pages/Report/Appointments/Show')));
|
||||
|
||||
const Livechat = Loadable(lazy(() => import('../pages/Report/Livechat/Index')));
|
||||
const LivechatCreate = Loadable(lazy(() => import('../pages/Report/Livechat/Create')));
|
||||
const LivechatShow = Loadable(lazy(() => import('../pages/Report/Livechat/Show')));
|
||||
|
||||
const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
|
||||
|
||||
const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));
|
||||
|
||||
Reference in New Issue
Block a user