Merge remote-tracking branch 'origin/master' into feature/client-portal

Modules/Internal/Http/Controllers/Api/Linksehat/PaymentController.php

@@ -0,0 +1,131 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api\Linksehat;
+
+use App\Helpers\Helper;
+use App\Models\OLDLMS\Appointment;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Modules\Internal\Transformers\LinksehatPaymentResource;
+
+class PaymentController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request)
+    {
+        // return $request->toArray();
+        $appointments = Appointment::query()
+            ->where('sPaymentStatus', 'settlement')
+            ->with(['healthCare', 'healthCare.commission', 'detail', 'user', 'doctor', 'doctor.user']);
+
+        if ($request->has('search')) {
+            $appointments->where(function ($query) use ($request) {
+                $query->where('nID', $request->search)
+                    ->orWhere('sBookingCode', $request->search)
+                    ->orWhereHas('detail', function (Builder $detail) use ($request) {
+                        $detail->where('sPaymentDetails', 'LIKE', '%' . $request->search . "%");
+                    });
+            });
+        }
+
+        if (($request->has('appointment_start') || $request->has('appointment_end'))
+            && !empty($request->appointment_start)
+            && !empty($request->appointment_end)
+        ) {
+            $appointments = $appointments->whereHas('detail', function (Builder $detail) use ($request) {
+
+                // Appointment Start
+                // if ($request->has('appointment_start')) {
+                $detail->where('dTanggalAppointment', '>=', $request->appointment_start);
+                // } else {
+                //     $detail->where('dTanggalAppointment', '>', now()->format('Y-m-d'));
+                // }
+
+                // if ($request->has('appointment_end')) {
+                $detail->where('dTanggalAppointment', '<=', $request->appointment_end);
+                // } else {
+                //     $detail->where('dTanggalAppointment', '<', now()->addDay(1)->format('Y-m-d'));
+                // }
+
+            });
+        }
+
+        if ($request->has('payment_status') && $request->payment_status != 'semua') {
+            $appointments->where('sPaymentStatus', $request->payment_status);
+        }
+
+        if ($request->has('healthcare_id') && !empty($request->healthcare_id)) {
+            $appointments->where('nIDHealthCare', $request->healthcare_id);
+        }
+
+        $appointments = $appointments->orderBy('dUpdateOn', 'DESC')
+            ->paginate();
+
+        return Helper::responseJson(Helper::paginateResources(LinksehatPaymentResource::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)
+    {
+        return view('internal::show');
+    }
+
+    /**
+     * 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)
+    {
+        //
+    }
+}

Modules/Internal/Http/Controllers/Api/OptionController.php

@@ -3,6 +3,7 @@
 namespace Modules\Internal\Http\Controllers\Api;
 
 use App\Models\Icd;
+use App\Models\OLDLMS\Healthcare;
 use App\Models\Organization;
 use App\Models\Practitioner;
 use Illuminate\Contracts\Support\Renderable;
@@ -61,6 +62,14 @@ class OptionController extends Controller
                     
                 return $healthcares;
                 break;
+            case 'linksehat-healthcares':
+                $healthcares = Healthcare::query()
+                    ->where('sHealthCare', 'LIKE', '%'.$request->search.'%')
+                    ->limit('10')
+                    ->get();
+                    
+                return $healthcares;
+                break;
             
             default:
                 # code...

Modules/Internal/Routes/api.php

@@ -21,6 +21,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\Linksehat\PaymentController;
 use Modules\Internal\Http\Controllers\Api\LivechatController;
 use Modules\Internal\Http\Controllers\Api\MemberController;
 use Modules\Internal\Http\Controllers\Api\OptionController;
@@ -49,6 +50,8 @@ Route::prefix('internal')->group(function () {
     Route::post('forget-password', [AuthController::class, 'forgetPassword'])->name('forget-password');
     Route::post('verify-email', [AuthController::class, 'verifyEmail'])->name('verify-email');
 
+    Route::get('linksehat/payments', [PaymentController::class, 'index']);
+
 
     Route::middleware('auth:sanctum')->group(function () {
 

Modules/Internal/Transformers/ClaimShowResource.php

@@ -41,6 +41,9 @@ class ClaimShowResource extends JsonResource
                 $encounterData = EncounterResource::make($encounter);
                 return $encounterData;
             });
+
+        // $memberDiagnosisHistories = $this->member->
+
         return $data;
     }
 }

Modules/Internal/Transformers/LinksehatPaymentResource.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Modules\Internal\Transformers;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class LinksehatPaymentResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $data = parent::toArray($request);
+
+        $data['share_komisi'] = $this->share_komisi;
+        $data['share_konsultasi'] = $this->share_konsultasi;
+
+        return $data;
+
+        // return [
+        //     // 'healthcare_name' => $this->healthCare->name ?? '',
+        //     'health_care' => $this->healthCare,
+        //     'nID' => $this->nID,
+        //     'sBookingCode' => $this->sBookingCode,
+        //     'doctor' => $this->doctor,
+        //     'user' => $this->user,
+        //     'payment_method' => $this->payment_method,
+        //     'detail' => $this->detail
+        // ];
+    }
+}

app/Models/Member.php

@@ -124,24 +124,7 @@ class Member extends Model
 
     public function currentCorporate()
     {
-        // return $this->belongsToMany(Corporate::class, 'corporate_employees', 'corporate_id', 'member_id')
-        //         // ->withPivot([
-        //         //     'branch_code',
-        //         //     'divison_id',
-        //         //     'nik',
-        //         //     'status',
-        //         //     'start',
-        //         //     'end'
-        //         // ])
-        //         ->where('start', '<', now())
-        //         ->where('end', '>', now());
-
-
         return $this->hasOneThrough(Corporate::class, CorporateEmployee::class, 'member_id', 'id', 'id', 'corporate_id');
-        // ->where('corporate_policies.start', '<', now())
-        // ->where('corporate_policies.end', '>', now())
-        // ->where('member_policies.start', '<', now())
-        // ->where('member_policies.end', '>', now());
     }
 
     public function memberPlans()

app/Models/OLDLMS/Appointment.php

@@ -31,6 +31,20 @@ class Appointment extends Model
         5 => 'Voucher',
     ];
 
+    public $sPaymentStatusName = [
+        'settlement' => 'Diterima',
+        'expired' => 'Kadaluarsa',
+        'capture' => 'Captured',
+        'deny' => 'Ditolak',
+        'pending' => 'Menunggu Pembayaran',
+        'cancel' => 'Dibatalkan',
+        'refund' => 'Dikembalikan',
+        'expire' => 'Kadaluarsa',
+        'cod' => 'COD',
+        'FAILED' => 'Gagal',
+        'COMPLETED' => 'Complete',
+    ];
+
     public $nIDJenisBookingNames = [
         1 => 'Rawat Jalan',
         2 => 'Telekonsultasi',
@@ -60,7 +74,8 @@ class Appointment extends Model
     protected $appends = [
         'status_name',
         'payment_method',
-        'type'
+        'type',
+        'payment_status'
     ];
 
     protected function statusName(): Attribute
@@ -71,6 +86,16 @@ class Appointment extends Model
             },
         );
     }
+    
+
+    protected function paymentStatus(): Attribute
+    {
+        return Attribute::make(
+            get: function ($value) {
+                return $this->sPaymentStatusName[$this->sPaymentStatus] ?? $this->sPaymentStatus;
+            },
+        );
+    }
 
     protected function paymentMethod(): Attribute
     {
@@ -90,12 +115,52 @@ class Appointment extends Model
         );
     }
 
+    protected function shareKonsultasi(): Attribute
+    {
+        return Attribute::make(
+            get: function() {
+                $consulPrice = ((float) $this->detail->sPaymentDetails['gross_amount'] ?? 0) - $this->nAdminFee;
+                if ( $this->nIDJenisBooking == 3 ) { // Telekonsultasi Sekarang
+                    return $consulPrice * (100-$this->healthCare->commission->nCommissionATC) / 100; 
+                }
+                else if ( $this->nIDJenisBooking == 2 ) { // Telekonsultasi
+                    return $consulPrice * (100-$this->healthCare->commission->nCommissionTC) / 100;
+                }
+                else {  // Walk In
+                    return $consulPrice * (100-$this->healthCare->commission->nCommission) / 100; 
+                }
+            }
+        );
+    }
+
+    protected function shareKomisi(): Attribute
+    {
+        return Attribute::make(
+            get: function() {
+                $consulPrice = ((float) $this->detail->sPaymentDetails['gross_amount'] ?? 0) - $this->nAdminFee;
+                if ( $this->nIDJenisBooking == 3 ) { // Telekonsultasi Sekarang
+                    return $consulPrice * ($this->healthCare->commission->nCommissionATC) / 100; 
+                }
+                else if ( $this->nIDJenisBooking == 2 ) { // Telekonsultasi
+                    return $consulPrice * ($this->healthCare->commission->nCommissionTC) / 100;
+                }
+                else {  // Walk In
+                    return $consulPrice * ($this->healthCare->commission->nCommission) / 100; 
+                }
+            }
+        );
+    }
 
     public function appointmentDetail()
     {
         return $this->hasOne(AppointmentDetail::class, 'nIDAppointment', 'nID');
     }
 
+    public function detail()
+    {
+        return $this->hasOne(AppointmentDetail::class, 'nIDAppointment', 'nID');
+    }
+
     public function doctor()
     {
         return $this->belongsTo(Dokter::class, 'nIDDokter', 'nID');

app/Models/OLDLMS/Healthcare.php

@@ -20,6 +20,11 @@ class Healthcare extends Model
 
     protected $primaryKey = 'nID';
 
+    public function commission()
+    {
+        return $this->hasOne(HealthcareCommission::class, 'nIDHealthcare', 'nID')->where('sStatus', 1);
+    }
+
     public function jadwalDokter()
     {
         return $this->hasMany(JadwalDokter::class, 'nIDHealthCare', 'nID');

app/Models/OLDLMS/HealthcareCommission.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models\OLDLMS;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class HealthcareCommission extends Model
+{
+    use HasFactory, SoftDeletes;
+
+    const CREATED_AT = 'dCreateOn';
+    const UPDATED_AT = 'dUpdateOn';
+    const DELETED_AT = 'dDeleteOn';
+
+    protected $connection = 'oldlms';
+
+    protected $table = 'tx_healthcare_commission';
+
+    protected $primaryKey = 'nID';
+
+    public function healthcare()
+    {
+        return $this->belongsTo(Healthcare::class, 'nIDHealthcare', 'nID');
+    }
+}

database/seeders/DummyMemberSeeder.php

@@ -20,7 +20,8 @@ class DummyMemberSeeder extends Seeder
             'admin@linksehat.dev' => ['administrator'],
             'manager+one@gmail.com' => ['corporate-manager'],
             'manager+two@gmail.com' => ['corporate-manager'],
-            'hospitaladmin@gmail.com' => ['hospital-admin']
+            'hospitaladmin@gmail.com' => ['hospital-admin'],
+            'accounting@linksehat.com' => ['accounting'],
         ];
 
         foreach ($userEmails as $email => $roles) {

database/seeders/RoleSeeder.php

@@ -18,7 +18,8 @@ class RoleSeeder extends Seeder
         $roles = [
             'administrator',
             'corporate-manager',
-            'hospital-admin'
+            'hospital-admin',
+            'accounting'
         ];
 
         foreach ($roles as $name) {

frontend/dashboard/src/components/autocomplete/AutocompleteLinksehatHealthcare.tsx

@@ -0,0 +1,64 @@
+import axios from '@/utils/axios';
+import { Autocomplete, TextField, CircularProgress } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import { IcdType } from '@/@types/diagnosis';
+import { Controller } from 'react-hook-form';
+
+type autocompleteHealthcareType = {
+  onChange: any;
+  textLabel: string;
+  currentValue: any | null;
+  currentOptions: IcdType[];
+  filter: object | null;
+};
+
+export default function AutocompleteLinksehatHealthcare({
+  onChange,
+  currentValue,
+  textLabel,
+  currentOptions = [],
+  ...other
+}: autocompleteHealthcareType) {
+  const [options, setOptions] = useState<IcdType>(currentOptions);
+  const [loading, setLoading] = useState(false);
+
+
+  function healthcaresToOptions(healthcares: any[]): any[] {
+    return healthcares.map(function (healthcare: any) {
+        return healthcare;
+    });
+  }
+
+  // To Receive Options from Props
+  useEffect(() => {
+    setOptions(healthcaresToOptions(currentOptions));
+  }, [currentOptions]);
+
+  const getOptions = (search: string) => {
+    axios
+      .get('options?type=linksehat-healthcares&search=' + search)
+      .then((res) => {
+        setOptions(healthcaresToOptions(res.data));
+      })
+      .then(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Autocomplete
+      options={options}
+      getOptionLabel={(option) => (`${option.sHealthCare}`)}
+      value={currentValue}
+      isOptionEqualToValue={(option, value) => option.nID == value.nID}
+      onChange={(event: any, newValue: any) => {
+        // setValue('primary_diagnosis_id', newValue?.id ?? null);
+        onChange(newValue);
+      }}
+      loading={loading}
+      renderInput={(params) => (
+        <TextField {...params} {...other} label={textLabel} variant="outlined" fullWidth onChange={(event) => {getOptions(event.target.value)}}/>
+      )}
+    />
+  );
+}

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -81,6 +81,7 @@ const navConfig = [
         children: [
           { title: 'Appointment', path: '/report/appointments' },
           { title: 'Live Chat', path: '/report/live-chat' },
+          { title: 'Linksehat Payment', path: '/report/linksehat-payments' },
         ],
       },
       {

frontend/dashboard/src/pages/Claims/components/DialogDocumentRequest.tsx

@@ -0,0 +1,70 @@
+import MuiDialog from '@/components/MuiDialog';
+import axios from '@/utils/axios';
+import { Button, Checkbox, Typography } from '@mui/material';
+import { Paper } from '@mui/material';
+import { Stack } from '@mui/material';
+import { enqueueSnackbar } from 'notistack';
+import React, { useState } from 'react';
+import FormHistoryPerawatan from './FormHistoryPerawatan';
+
+type DialogDocumentRequestType = {
+    openDialog: boolean;
+    setOpenDialog: React.Dispatch;
+    onSubmit?: void;
+    claim: any; // TODO create ClaimType
+    encounter?: any;
+}
+
+export default function DialogDocumentRequest({ openDialog, setOpenDialog, onSubmit, claim } : DialogDocumentRequestType) {
+
+  const handleSubmit = (data) => {
+    
+    axios.post(`claims/${claim.id}/encounters`, data)
+        .then((res) => {
+            enqueueSnackbar(res.data.message, {variant: 'success'})
+            setOpenDialog(false);
+        })
+        .catch((err) => {
+            enqueueSnackbar(err.message, {variant: 'error'})
+        })
+
+    onSubmit()
+  };
+
+  const documentTypes = [
+    {
+        type: "result",
+        name: "Dokumen Hasil Penunjang"
+    },
+    {
+        type: "claim-diagnosis",
+        name: "Dokumen Diagnosa"
+    },
+    {
+        type: "claim-diagnosis",
+        name: "Dokumen Diagnosa"
+    }
+  ];
+  
+
+  const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+        {documentTypes.map((document, index) => (
+            <Stack key={index} direction="row" alignContent="center" alignItems="center">
+                <Checkbox></Checkbox>
+                <Typography>{document.name}</Typography>
+            </Stack>
+        ))}
+    </Stack>
+  );
+
+  return (
+    <MuiDialog
+      title={{ name: 'Request Document'}}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="xl"
+    />
+  );
+}

frontend/dashboard/src/pages/Claims/components/DialogHistoryPerawatan.tsx

@@ -4,12 +4,12 @@ import { Button, Checkbox, Typography } from '@mui/material';
 import { Paper } from '@mui/material';
 import { Stack } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import FormHistoryPerawatan from './FormHistoryPerawatan';
 
 type DialogHistoryPerawatanType = {
     openDialog: boolean;
-    setOpenDialog: void;
+    setOpenDialog: React.Dispatch;
     onSubmit?: void;
     claim: any; // TODO create ClaimType
     encounter?: any;

frontend/dashboard/src/pages/Claims/components/Documents.tsx

@@ -1,33 +1,57 @@
+import { IconButtonAnimate } from '@/components/animate';
 import Iconify from '@/components/Iconify';
+import MuiDialog from '@/components/MuiDialog';
+import { Box, Tooltip } from '@mui/material';
 import { Paper, Stack, Typography } from '@mui/material';
 import { useState } from 'react';
+import DialogDocumentRequest from './DialogDocumentRequest';
 
 export default function Documents({ files }) {
   // --------------------------------------------------------------
   // Dialog Request Document
   const [openDialogRequestDocument, setOpenDialogRequestDocument] = useState(false);
+  const [openDialogConfirmRequestDocument, setOpenDialogConfirmRequestDocument] = useState(false);
 
-  function FileItem({item}) {
+  function FileItem({ item }) {
     function fileCategory(type: string) {
-        switch(type) {
+      switch (type) {
-            case 'claim-result':
+        case 'claim-result':
-                return 'Claim Result';
+          return 'Claim Result';
-            case 'claim-diagnosis':
+        case 'claim-diagnosis':
-                return 'Claim Diagnosis';
+          return 'Claim Diagnosis';
-            case 'claim-condition':
+        case 'claim-condition':
-                return 'Claim Condition';
+          return 'Claim Condition';
-            default:
+        default:
-                return 'Other File';
+          return 'Other File';
-        }
+      }
     }
 
+    const documentTypes = [
+      {
+        type: 'result',
+        name: 'Dokumen Hasil Penunjang',
+      },
+      {
+        type: 'claim-diagnosis',
+        name: 'Dokumen Diagnosa',
+      },
+      {
+        type: 'claim-diagnosis',
+        name: 'Dokumen Diagnosa',
+      },
+    ];
+
     return (
       <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 1 }}>
         <Stack>
-            <Typography variant="body2" fontWeight="600">
+          <Typography variant="body2" fontWeight="600">
-                { fileCategory(item.type) }
+            {fileCategory(item.type)}
-            </Typography>
+          </Typography>
-            <Typography variant="body2"><a href={item.url} target="_blank">{ item.name }</a></Typography>
+          <Typography variant="body2">
+            <a href={item.url} target="_blank">
+              {item.name}
+            </a>
+          </Typography>
         </Stack>
         <Iconify icon="eva:arrow-ios-forward-fill"></Iconify>
       </Stack>
@@ -51,18 +75,51 @@ export default function Documents({ files }) {
       </Stack>
 
       <Paper sx={{ background: 'white', marginTop: 2 }}>
-        { files.length > 0 ? (
+        <Stack>
-            <Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{p: 2, paddingBottom: 1}}>
-            { files.map((file, index) => (
+            <Typography fontWeight="bold">Dokumen Diagnosa</Typography>
-              <FileItem item={file} key={index}></FileItem>
+            <Tooltip title="Request to upload this">
-            )) }
+              <IconButtonAnimate color="primary" onClick={() => {}}>
+              <Iconify icon="eva:bell-outline" width={20} height={20}></Iconify>
+              {/* <Iconify icon="eva:done-all-fill" width={20} height={20} /> */}
+              </IconButtonAnimate>
+            </Tooltip>
+
+            <MuiDialog
+              title="Are you sure to request this document?"
+              openDialog={openDialogConfirmRequestDocument}
+              setOpenDialog={setOpenDialogConfirmRequestDocument}
+              content={(
+                <Typography variant="body2">kasjdnkajsdnkasdnaksjdnaksdjnkasdnkajsdn</Typography>
+              )}
+            />
           </Stack>
-          ) : (
+          <Stack sx={{px: 2}}>
+            <Typography variant="body2">Dokumen Diagnosa</Typography>
+          </Stack>
+          <Stack sx={{px: 2}}>
+            <Typography variant="body2">Dokumen Diagnosa</Typography>
+          </Stack>
+        </Stack>
+
+
+        {files.length > 0 ? (
+          <Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
+            {files.map((file, index) => (
+              <FileItem item={file} key={index}></FileItem>
+            ))}
+          </Stack>
+        ) : (
           <Stack sx={{ p: 1 }}>
-            <Typography>Belum ada History Perawatan</Typography>
+            <Typography>Belum ada dokumen</Typography>
           </Stack>
         )}
       </Paper>
+
+      <DialogDocumentRequest
+        setOpenDialog={setOpenDialogRequestDocument}
+        openDialog={openDialogRequestDocument}
+      ></DialogDocumentRequest>
     </Paper>
   );
 }

frontend/dashboard/src/pages/Report/LinksehatPayments/Create.tsx

@@ -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>
+// );
+// }

frontend/dashboard/src/pages/Report/LinksehatPayments/Form.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/LinksehatPayments/Index.tsx

@@ -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 LinksehatPayments() {
+  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: 'Payment',
+              href: '/report/linksehat-payments',
+            },
+          ]}
+        />
+
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/LinksehatPayments/List.tsx

@@ -0,0 +1,637 @@
+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,
+  InputLabel,
+} 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 AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
+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 { fNumber } from '@/utils/formatNumber';
+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';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { MenuItem } from '@mui/material';
+import { fPostFormat } from '@/utils/formatTime';
+import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [organizationOptions, setOrganizationOptions] = useState([]);
+  const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  useEffect(() => {
+        
+    // axios.get(`/search-organizations`).then((response) => {
+    //   setOrganizationOptions(response.data);
+    // });
+
+  }, [])
+
+  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);
+    };
+
+    const handleSearchStatus = (event: any) => {
+      console.log('search status', 'Yeet');
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    const paymentStatusOptions = {
+      'settlement' : 'Diterima',
+      'expired' : 'Kadaluarsa',
+      'capture' : 'Captured',
+      'deny' : 'Ditolak',
+      'pending' : 'Menunggu Pembayaran',
+      'cancel' : 'Dibatalkan',
+      'refund' : 'Dikembalikan',
+      'expire' : 'Kadaluarsa',
+      'cod' : 'COD',
+      'FAILED' : 'Gagal',
+      'COMPLETED' : 'Complete',
+    };
+
+    const dataOrganizations = [];
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item md={4}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  // handleSearchSubmit(event);
+                  
+                  const filter = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+                  setSearchParams(filter)
+                  loadDataTableData(filter)
+                }
+              }}
+              label="Search"
+              value={searchText}
+              InputProps={{
+                // startAdornment: (
+                //   <InputAdornment position="start">
+                //     <Search />
+                //   </InputAdornment>
+                // ),
+                placeholder: 'Id Pemesanan, Transaction ID',
+              }}
+            />
+          </Grid>
+          <Grid item md={2}>
+          <FormControl fullWidth>
+  <InputLabel>
+    Payment Status
+  </InputLabel>
+            <Select
+              value={searchParams.get('payment_status') ?? 'semua'}
+              label="Payment Status"
+              onChange={(el) => {
+                // console.log(el.target.value)
+                const filter = Object.fromEntries([...searchParams.entries(), ['payment_status', el.target.value]]);
+                setSearchParams(filter)
+                loadDataTableData(filter)
+              }}
+            >
+              <MenuItem value={'semua'}>Semua</MenuItem>
+              {Object.entries(paymentStatusOptions).map((option, index) => (
+                <MenuItem value={option[0]} key={index}>{option[1]}</MenuItem>
+              ))}
+            </Select>
+            </FormControl>
+          </Grid>
+          <Grid item md={2}>
+            <AutocompleteLinksehatHealthcare
+              onChange={(value) => {
+                if (value) {
+                  const filter = Object.fromEntries([...searchParams.entries(), ['healthcare_id', value.nID ?? '']]);
+                  setSearchParams(filter)
+                  loadDataTableData(filter)
+                  setOrganizationOptions([value])
+                } else {
+                  const filter = Object.fromEntries([...searchParams.entries(), ['healthcare_id', '']]);
+                  setSearchParams(filter)
+                  loadDataTableData(filter)
+                  setOrganizationOptions([])
+                }
+              }}
+              currentOptions={organizationOptions}
+              currentValue={organizationOptions?.find((org) => org?.nID == searchParams.get('healthcare_id'))}
+              textLabel="Rumah Sakit"
+              placeholder="Nama"
+            />
+          </Grid>
+
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('appointment_start')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  
+                  try {
+
+                    if (value && !!Date.parse(value)) {
+
+                  const date = value ? fPostFormat(value) : ''
+                  var entries = [...searchParams.entries(), ['appointment_start', date ?? '']];
+                  if (!searchParams.get('appointment_end')) {
+                    entries = [...entries, ['appointment_end', date ?? '']];
+                  }
+                  const filter = Object.fromEntries(entries);
+
+                  setSearchParams(filter)
+                  loadDataTableData(filter)
+                }
+                } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="Start"
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('appointment_end')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+
+                    if (value && !!Date.parse(value)) {
+
+                      const date = fPostFormat(value)
+                      var entries = [...searchParams.entries(), ['appointment_end', date ?? '']];
+                      if (!searchParams.get('appointment_start')) {
+                        entries = [...entries, ['appointment_start', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+                      
+                      setSearchParams(filter)
+                      loadDataTableData(filter)
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </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>
+    );
+  }
+
+  //TODO Create PaymentType
+  function createData(payments: any): any {
+    return {
+      ...payments,
+    };
+  }
+
+  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.health_care?.sHealthCare ?? '-'}</TableCell>
+          <TableCell align="left">{row.detail?.sPaymentDetails?.settlement_time ?? '-'}</TableCell>
+          <TableCell align="left">{row.detail?.dTanggalAppointment ?? ''}</TableCell>
+          <TableCell align="left">{row.nID}</TableCell>
+          <TableCell align="left">{row.sBookingCode ?? ''}</TableCell>
+          <TableCell align="left">{row.doctor?.user?.full_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.user?.full_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.user?.sEmail ?? '-'}</TableCell>
+          <TableCell align="left">{row.type ?? '-'}</TableCell>
+          <TableCell align="left">{row.payment_method ?? '-'}</TableCell>
+          <TableCell align="left">{'-'}</TableCell>
+          <TableCell align="left">
+            {fNumber(parseInt(row.detail?.sPaymentDetails?.gross_amount ?? 0))}
+          </TableCell>
+          <TableCell align="left">{fNumber(parseInt(row.share_konsultasi))}</TableCell>
+          <TableCell align="left">{fNumber(parseInt(row.share_komisi))}</TableCell>
+          <TableCell align="left">{fNumber(parseInt(row.nAdminFee ?? 0))}</TableCell>
+          <TableCell align="left">{row.payment_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>
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Stack sx={{ marginLeft: 8 }}>
+                <Typography variant="body1" fontWeight="bold">
+                  Midtrans
+                </Typography>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Grid container>
+                      <Grid item xs={3}>
+                        Transaction ID
+                      </Grid>
+                      <Grid item xs={9}>
+                        : {row.detail?.sPaymentDetails?.transaction_id}
+                      </Grid>
+                      <Grid item xs={3}>
+                        Order ID
+                      </Grid>
+                      <Grid item xs={9}>
+                        : {row.detail?.sPaymentDetails?.order_id}
+                      </Grid>
+                      <Grid item xs={3}>
+                        Payment Type
+                      </Grid>
+                      <Grid item xs={9}>
+                        : {row.detail?.sPaymentDetails?.payment_type}
+                      </Grid>
+                      <Grid item xs={3}>
+                        Transaction Time
+                      </Grid>
+                      <Grid item xs={9}>
+                        : {row.detail?.sPaymentDetails?.transaction_time}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Stack>
+            </Collapse>
+          </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(
+      '/linksehat/payments',
+      {
+        params: filter,
+      }
+    );
+    setDataTableLoading(false);
+    setDataTableData(response.data.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterPaymentStatus: string,
+    searchFilterAppointmentStart: string,
+    searchFilterAppointmentEnd: string,
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      appointment_start: searchFilterAppointmentStart,
+      appointment_end: searchFilterAppointmentEnd,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      appointment_start: searchFilterAppointmentStart,
+      appointment_end: searchFilterAppointmentEnd,
+    });
+  };
+
+  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">
+                  Faskes
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Tanggal Bayar
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Tanggal Konsultasi
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  ID Pemesanan
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Kode Pemesanan
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Dokter
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Pasien
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Email
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Tipe
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Metode Pembayaran
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Jenis Benefit
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Total Transfer (Rp)
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Konsultasi (Rp)
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Komisi (Rp)
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Biaya Administrasi (Rp)
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Status
+                </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.nID} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/Report/LinksehatPayments/Show.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/LinksehatPayments/View.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/Index.tsx

@@ -5,12 +5,12 @@ import Page from '../../../components/Page';
 import useSettings from '../../../hooks/useSettings';
 import List from './List';
 
-export default function Doctors() {
+export default function Doctor() {
   const { themeStretch } = useSettings();
 
   const { id } = useParams();
 
-  const pageTitle = 'Live Chat';
+  const pageTitle = 'Payment';
   return (
     <Page title={pageTitle}>
       <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -22,8 +22,8 @@ export default function Doctors() {
               href: '/report',
             },
             {
-              name: 'Live Chat',
+              name: 'Payment',
-              href: '/report/live-chat',
+              href: '/report/payment',
             },
           ]}
         />

frontend/dashboard/src/routes/index.tsx

@@ -265,6 +265,10 @@ export default function Router() {
           path: 'report/live-chat/:id/edit',
           element: <LivechatCreate />,
         },
+        {
+          path: 'report/linksehat-payments',
+          element: <LinksehatPayment />,
+        },
 
         {
           path: 'claims',
@@ -385,6 +389,8 @@ 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 LinksehatPayment = Loadable(lazy(() => import('../pages/Report/LinksehatPayments/Index')));
+
 const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
 
 const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));

public/images/unsplash_ZCztndOWdjs (2).png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://www.figma.com/