perbaili list table corporate, dan table plan

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

@@ -38,6 +38,8 @@ class CorporateController extends Controller
             ->withCount([
                 'employees',
                 'corporateBenefits',
+                'corporatePlans',
+
                 // 'claims'
             ])
             ->where('type', 'corporate')
@@ -141,7 +143,7 @@ class CorporateController extends Controller
                     'description' => 'Optical',
                 ],
             ];
-    
+
             foreach ($services as $service) {
 
                 $corporateService = $newCorporate->corporateServices()->create([
@@ -236,11 +238,11 @@ class CorporateController extends Controller
     public function show($id)
     {
         $corporate = Corporate::query()
-                            ->with(['currentPolicy'])
+            ->with(['currentPolicy'])
-                            ->withCount('corporatePlans')
+            ->withCount('corporatePlans')
-                            ->withCount('employees')
+            ->withCount('employees')
-                            // ->withCount('employees.claims')
+            // ->withCount('employees.claims')
-                            ->findOrFail($id);
+            ->findOrFail($id);
 
         return response()->json($corporate);
     }

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

@@ -17,14 +17,33 @@ class CorporatePlanController extends Controller
     public function index(Request $request, $corporate_id)
     {
         $benefits = CorporatePlan::query()
-                    ->filter($request->all())
+            ->filter($request->all())
-                    ->where('corporate_id', $corporate_id)
+            ->where('corporate_id', $corporate_id)
-                    ->paginate(0)
+            ->paginate(0)
-                    ->appends($request->all());
+            ->appends($request->all());
-        
+
         return $benefits;
     }
 
+    public function activation(Request $request, $plan_id)
+    {
+        $request->validate([
+            'active' => 'required'
+        ]);
+
+        // abort(404);
+
+        $plan = CorporatePlan::findOrFail($plan_id);
+        $plan->active = $request->active == '1';
+
+        if ($plan->save()) {
+            return response()->json([
+                'plan' => $plan,
+                'message' => 'Status Updated Successfully'
+            ]);
+        }
+    }
+
     /**
      * Show the form for creating a new resource.
      * @return Renderable

Modules/Internal/Routes/api.php

@@ -56,6 +56,7 @@ Route::prefix('internal')->group(function () {
         Route::post('corporates/{corporate_id}/corporate-plans', [CorporatePlanController::class, 'store']);
         Route::get('corporates/{corporate_id}/corporate-plans/{id}/edit', [CorporatePlanController::class, 'edit']);
         Route::put('corporates/{corporate_id}/corporate-plans/{id}', [CorporatePlanController::class, 'update']);
+        Route::put('plans/{plan_id}/activation', [CorporatePlanController::class, 'activation']);
 
         Route::get('corporates/{corporate_id}/plans', [PlanController::class, 'index']);
         Route::post('corporates/{corporate_id}/plans/import', [PlanController::class, 'planImport']);

app/Models/CorporatePlan.php

@@ -11,6 +11,8 @@ class CorporatePlan extends Model
 {
     use HasFactory, SoftDeletes, Blameable;
 
+    protected $table = 'plans';
+
     protected $fillable = [
         'corporate_id',
         'code',
@@ -28,8 +30,8 @@ class CorporatePlan extends Model
     {
         $query->when($filters['search'] ?? false, function ($query, $search) {
             return $query
-                    ->where('code', 'like', "%" . $search . "%")
+                ->where('code', 'like', "%" . $search . "%")
-                    ->orWhere('name', 'like', "%" . $search . "%");
+                ->orWhere('name', 'like', "%" . $search . "%");
         });
     }
 }

database/migrations/2022_12_19_171824_add_active_to_plans_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('plans', function (Blueprint $table) {
+            $table->boolean('active')->after('max_surgery_periode_days');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('plans', function (Blueprint $table) {
+            $table->dropColumn('active');
+        });
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -15,7 +15,7 @@ class DatabaseSeeder extends Seeder
     public function run()
     {
         // \App\Models\User::factory(10)->create();
-        
+
         $this->call([
             DummyMemberSeeder::class,
             DrugSeeder::class,
@@ -25,7 +25,9 @@ class DatabaseSeeder extends Seeder
             ProvinceSeeder::class,
             CitySeeder::class,
             DistrictSeeder::class,
-            VillageSeeder::class
+            VillageSeeder::class,
+            OrganizationSeeder::class,
+            PractitionerSeeder::class,
         ]);
     }
 }

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -403,10 +403,7 @@ export default function Corporates() {
                         Corporate Limit
                       </Grid>
                       <Grid item xs={6}>
-                        :{' '}
+                        : {row.current_policy ? fCurrency(row.current_policy?.limit_balance) : '-'}
-                        {row.current_policy
-                          ? fCurrency(row.current_policy?.limit_balance)
-                          : '-'}
                       </Grid>
                     </Grid>
                   </Grid>
@@ -437,7 +434,7 @@ export default function Corporates() {
                   </Grid>
                 </Grid>
 
-                <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
+                {/* <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
                 <Grid container>
                   <Grid item xs={12}>
                     <Grid container>
@@ -449,7 +446,7 @@ export default function Corporates() {
                       </Grid>
                     </Grid>
                   </Grid>
-                </Grid>
+                </Grid> */}
               </Box>
             </Collapse>
           </TableCell>

frontend/dashboard/src/pages/Corporates/Plan/List.tsx

@@ -1,5 +1,33 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Grid,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -21,30 +49,38 @@ export default function CorporatePlanList() {
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
-  
+
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
+    useEffect(() => {
       // console.log('Search Input: useEffect')
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
       </form>
     );
   }
@@ -54,8 +90,8 @@ export default function CorporatePlanList() {
     // Create Button Menu
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const createMenu = Boolean(anchorEl);
-    const importPlan = useRef<HTMLInputElement>(null) 
+    const importPlan = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       setAnchorEl(event.currentTarget);
@@ -70,52 +106,66 @@ export default function CorporatePlanList() {
         handleClose();
         importPlan.current ? importPlan.current.click() : console.log('No File selected');
       } else {
-        alert('No file selected')
+        alert('No file selected');
       }
-    }
+    };
 
     const handleCancelImportButton = () => {
-      importPlan.current.value = "";
+      importPlan.current.value = '';
-      importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
+      importPlan.current.dispatchEvent(new Event('change', { bubbles: true }));
-    }
+    };
 
     const handleImportChange = (event: any) => {
       if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name)
+        setCurrentImportFileName(event.target.files[0].name);
       } else {
         setCurrentImportFileName(null);
       }
-    }
+    };
 
     const handleUpload = () => {
       if (importPlan.current?.files.length) {
         const formData = new FormData();
-        formData.append("file", importPlan.current?.files[0])
+        formData.append('file', importPlan.current?.files[0]);
-        axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
+        axios
-          .then(response => {
+          .post(`corporates/${corporate_id}/import-plan-benefit`, formData)
+          .then((response) => {
             handleCancelImportButton();
             loadDataTableData();
-            setImportResult(response.data)
+            setImportResult(response.data);
             // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
           })
-          .catch(response => {
+          .catch((response) => {
-            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+            enqueueSnackbar(
-          })
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message,
+              { variant: 'error' }
+            );
+          });
       } else {
-        enqueueSnackbar('No File Selected', { variant: 'warning' })
+        enqueueSnackbar('No File Selected', { variant: 'warning' });
       }
-    }
+    };
-    
+
     return (
       <div>
-        <input type='file' id='file' ref={importPlan} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        <input
-        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          type="file"
-          <SearchInput onSearch={applyFilter}/>
+          id="file"
-          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          ref={importPlan}
-          <Button
+          style={{ display: 'none' }}
+          onChange={handleImportChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        {!currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <SearchInput onSearch={applyFilter} />
+            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+            <Button
               id="import-button"
-              variant='outlined'
+              variant="outlined"
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+              startIcon={<AddIcon />}
+              sx={{ p: 1.8 }}
               aria-controls={createMenu ? 'basic-menu' : undefined}
               aria-haspopup="true"
               aria-expanded={createMenu ? 'true' : undefined}
@@ -135,39 +185,55 @@ export default function CorporatePlanList() {
               <MenuItem onClick={handleImportButton}>Import</MenuItem>
               <MenuItem onClick={handleClose}>Download Template</MenuItem>
             </Menu>
-        </Stack>
+          </Stack>
         )}
 
-        {( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+        {currentImportFileName && (
-          <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
+            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
-            <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
+              <Button onClick={handleImportButton} fullWidth>
-          </ButtonGroup>
+                {currentImportFileName ?? 'No File Selected'}
+              </Button>
+              <Button
+                onClick={handleCancelImportButton}
+                size="small"
+                fullWidth={false}
+                sx={{ p: 1.8 }}
+              >
+                <CancelIcon color="error" />
+              </Button>
+            </ButtonGroup>
 
-          <Button
+            <Button
-            id="upload-button"
+              id="upload-button"
-            variant='outlined'
+              variant="outlined"
-            startIcon={<UploadIcon />} sx={{ p: 1.8 }}
+              startIcon={<UploadIcon />}
-            onClick={handleUpload}
+              sx={{ p: 1.8 }}
-          >
+              onClick={handleUpload}
-            Upload
+            >
-          </Button>
+              Upload
-        </Stack>
+            </Button>
+          </Stack>
         )}
-        {( importResult && 
+        {importResult && (
-        <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
-          <Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
+            <Box sx={{ color: 'text.secondary' }}>
-        </Stack>
+              Last Import Result Report :{' '}
+              <a href={importResult.result_file?.url ?? '#'}>
+                {importResult.result_file?.name ?? '-'}
+              </a>
+            </Box>
+          </Stack>
         )}
       </div>
     );
   }
 
   // Called on every row to map the data to the columns
-  function createData( plan: Plan ): Plan {
+  function createData(plan: Plan): Plan {
     return {
       ...plan,
-    }
+    };
   }
 
   // Generate the every row of the table
@@ -175,15 +241,38 @@ export default function CorporatePlanList() {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
 
+    const handleActivate = (model: any, status: string) => {
+      axios
+        .put(`/plans/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
+        })
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.plan.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
           <TableCell>
-            <IconButton
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
@@ -191,93 +280,321 @@ export default function CorporatePlanList() {
           <TableCell align="left">{row.corporate_plan_id}</TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.type}</TableCell>
-          <TableCell align="left">{row.start}</TableCell>
+
-          <TableCell align="left">{row.end}</TableCell>
-          <TableCell align="left">{row.require_referral}</TableCell>
-          <TableCell align="left">{row.referral_source}</TableCell>
-          <TableCell align="left">{row.referral_duration}</TableCell>
-          <TableCell align="left">{row.family_plan}</TableCell>
-          <TableCell align="left">{row.family_plan_share_rules}</TableCell>
           <TableCell align="left">{row.limit_rules}</TableCell>
-          <TableCell align="left">{row.layer}</TableCell>
+
-          <TableCell align="left">{row.layer_conditions}</TableCell>
+          <TableCell align="center">
-          <TableCell align="left">{row.budget_type}</TableCell>
+            {row.active == 1 && (
-          <TableCell align="left">{row.budget_code}</TableCell>
+              <Button
-          <TableCell align="left">{row.budget_conditions}</TableCell>
+                variant="outlined"
-          <TableCell align="left">{row.surgery_limit}</TableCell>
+                color="success"
-          <TableCell align="left">{row.non_surgery_limit}</TableCell>
+                size="small"
-          <TableCell align="left">{row.max_claim_limit}</TableCell>
+                onClick={() => {
-          <TableCell align="left">{row.max_claim_count}</TableCell>
+                  handleActivate(row, 'inactive');
-          <TableCell align="left">{row.area_limit}</TableCell>
+                }}
-          <TableCell align="left">{row.limit_shared_plans}</TableCell>
+              >
-          <TableCell align="left">{row.limit_shared_plan_type}</TableCell>
+                Active
-          <TableCell align="left">{row.cashless_percentage}</TableCell>
+              </Button>
-          <TableCell align="left">{row.reimbursement_percentage}</TableCell>
+            )}
-          <TableCell align="left">{row.digital_percentage}</TableCell>
+            {row.active != 1 && (
-          <TableCell align="left">{row.co_share_m_percentage}</TableCell>
+              <Button
-          <TableCell align="left">{row.co_share_s_percentage}</TableCell>
+                variant="outlined"
-          <TableCell align="left">{row.co_share_c_percentage}</TableCell>
+                color="error"
-          <TableCell align="left">{row.cashless_deductible}</TableCell>
+                size="small"
-          <TableCell align="left">{row.reimbursement_deductible}</TableCell>
+                onClick={() => {
-          <TableCell align="left">{row.digital_deductible}</TableCell>
+                  handleActivate(row, 'active');
-          <TableCell align="left">{row.co_share_m_deductible}</TableCell>
+                }}
-          <TableCell align="left">{row.co_share_s_deductible}</TableCell>
+              >
-          <TableCell align="left">{row.co_share_c_deductible}</TableCell>
+                Inactive
-          <TableCell align="left">{row.co_share_deductible_condition}</TableCell>
+              </Button>
-          <TableCell align="left">{row.msc}</TableCell>
+            )}
-          <TableCell align="left">{row.genders}</TableCell>
+          </TableCell>
-          <TableCell align="left">{row.min_age}</TableCell>
+          <TableCell align="center">
-          <TableCell align="left">{row.max_age}</TableCell>
+            <Button variant="outlined" color="success" size="small">
-          <TableCell align="left">{row.rule_of_excess}</TableCell>
+              Edit
-          <TableCell align="left">{row.max_excess_covered}</TableCell>
+            </Button>
-          <TableCell align="left">{row.prorate_type}</TableCell>
+          </TableCell>
-          <TableCell align="left">{row.prorate_lookup}</TableCell>
-          <TableCell align="left">{row.currency}</TableCell>
-          <TableCell align="left">{row.max_surgery_reinstatement_days}</TableCell>
-          <TableCell align="left">{row.max_surgery_periode_days}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Edit</Button></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
+              <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
-                <Typography variant="body2" gutterBottom component="div">
+                <Grid container>
-                  No Extra Data
+                  <Grid item xs={6} sx={{ padding: 2 }}>
-                </Typography>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Start
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.start ? row.start : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        End
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.end ? row.end : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Referal
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.require_referral ? row.require_referral : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Referral Source
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.referral_source ? row.referral_source : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Referral Duration
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.referral_duration ? row.referral_duration : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Family Plan
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.family_plan ? row.family_plan : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Family Sharing Overflow
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.family_plan_share_rules ? row.family_plan_share_rules : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Max/Claim
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.max_claim_limit ? row.max_claim_limit : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Max Count of Claim
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.max_claim_count ? row.max_claim_count : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Area
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.area_limit ? row.area_limit : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Shared Plan
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.limit_shared_plans ? row.limit_shared_plans : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Limit Shared Type
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.limit_shared_plan_type ? row.limit_shared_plan_type : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Cashless(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.cashless_percentage ? row.cashless_percentage : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Reimbursement(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.reimbursement_percentage ? row.reimbursement_percentage : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Digital(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.digital_deductible ? row.digital_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        CoShare M(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_m_percentage ? row.co_share_m_percentage : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        CoShare S(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_s_percentage ? row.co_share_s_percentage : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        CoShare C(%)
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_c_percentage ? row.co_share_c_percentage : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Cashless Deductible
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.cashless_deductible ? row.cashless_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Reimbursement Deductible
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.reimbursement_deductible ? row.reimbursement_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Digital Deductible
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.digital_deductible ? row.digital_deductible : '-'}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  <Grid item xs={6} sx={{ padding: 2 }}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Layer ID
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.layer ? row.layer : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Layer Condition
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.layer_conditions ? row.layer_conditions : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Budget Type
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.budget_type ? row.budget_type : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Budget Code
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.budget_code ? row.budget_code : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Budget Condition
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.budget_conditions ? row.budget_conditions : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Surgery
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.surgery_limit ? row.surgery_limit : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Non Surgery
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.non_surgery_limit ? row.non_surgery_limit : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        DeductibleM
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_m_deductible ? row.co_share_m_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        DeductibleS
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_s_deductible ? row.co_share_s_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        DeductibleC
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.co_share_c_deductible ? row.co_share_c_deductible : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        CoShare & Deductible Condition
+                      </Grid>
+                      <Grid item xs={6}>
+                        :
+                        {row.co_share_deductible_condition
+                          ? row.co_share_deductible_condition
+                          : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        MSC
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.msc ? row.msc : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Gender
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.genders ? row.genders : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Min Age
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.min_age ? row.min_age : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Max Age
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.max_age ? row.max_age : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Rule of Excess
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.rule_of_excess ? row.rule_of_excess : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Max Excess Covered
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.max_excess_covered ? row.max_excess_covered : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Prorate Type
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.prorate_type ? row.prorate_type : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Prorate Lookup
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.prorate_lookup ? row.prorate_lookup : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Currency
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.currency ? row.currency : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Reinstatement Surgery
+                      </Grid>
+                      <Grid item xs={6}>
+                        :
+                        {row.max_surgery_reinstatement_days
+                          ? row.max_surgery_reinstatement_days
+                          : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Period of Surgery
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.max_surgery_periode_days ? row.max_surgery_periode_days : '-'}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
               </Box>
-            {false && <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  Rules
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
-                        <TableCell>{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                      </TableRow>
-                    {/* ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    } */}
-                  </TableBody>
-                </Table>
-              </Box>}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -290,138 +607,109 @@ export default function CorporatePlanList() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
+    path: '',
-    first_page_url: "",
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
+    last_page_url: '',
-    next_page_url: "",
+    next_page_url: '',
-    prev_page_url: "",
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
   const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/plans', { params: filter });
+    const response = await axios.get('/corporates/' + corporate_id + '/plans', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
-  }
+  };
 
   const headStyle = {
     fontWeight: 'bold',
   };
 
   const applyFilter = async (searchFilter: string) => {
-    await loadDataTableData({ "search" : searchFilter });
+    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
+  };
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
-  
+
   return (
     <Stack>
       <ImportForm />
 
-        <Card>
+      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
                 <TableCell style={headStyle} align="left" />
-                <TableCell style={headStyle} align="left">Service</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Plan</TableCell>
+                  Service
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Type</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Start</TableCell>
+                  Plan
-                <TableCell style={headStyle} align="left">End</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Referral</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Referral Source</TableCell>
+                  Code
-                <TableCell style={headStyle} align="left">Referral Duration</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Family Plan</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Family Sharing Overflow</TableCell>
+                  Type
-                <TableCell style={headStyle} align="left">Plan Limit</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Layer ID</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Layer Condition</TableCell>
+                  Plan Limit
-                <TableCell style={headStyle} align="left">Budget Type</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Budget Code</TableCell>
+                <TableCell style={headStyle} align="center">
-                <TableCell style={headStyle} align="left">Budget Condition</TableCell>
+                  Status
-                <TableCell style={headStyle} align="left">Surgery</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Non Surgery</TableCell>
+                <TableCell style={headStyle} align="center">
-                <TableCell style={headStyle} align="left">Max/Claim</TableCell>
+                  Action
-                <TableCell style={headStyle} align="left">Max Count of Claim</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Area</TableCell>
-                <TableCell style={headStyle} align="left">Shared Plan</TableCell>
-                <TableCell style={headStyle} align="left">Limit Shared Type</TableCell>
-                <TableCell style={headStyle} align="left">Cashless(%)</TableCell>
-                <TableCell style={headStyle} align="left">Reimbursement(%)</TableCell>
-                <TableCell style={headStyle} align="left">Digital(%)</TableCell>
-                <TableCell style={headStyle} align="left">CoShare M(%)</TableCell>
-                <TableCell style={headStyle} align="left">CoShare S(%)</TableCell>
-                <TableCell style={headStyle} align="left">CoShare C(%)</TableCell>
-                <TableCell style={headStyle} align="left">Cashless Deductible</TableCell>
-                <TableCell style={headStyle} align="left">Reimbursement Deductible</TableCell>
-                <TableCell style={headStyle} align="left">Digital Deductible</TableCell>
-                <TableCell style={headStyle} align="left">DeductibleM</TableCell>
-                <TableCell style={headStyle} align="left">DeductibleS</TableCell>
-                <TableCell style={headStyle} align="left">DeductibleC</TableCell>
-                <TableCell style={headStyle} align="left">CoShare & Deductible Condition</TableCell>
-                <TableCell style={headStyle} align="left">MSC</TableCell>
-                <TableCell style={headStyle} align="left">Gender</TableCell>
-                <TableCell style={headStyle} align="left">Min Age</TableCell>
-                <TableCell style={headStyle} align="left">Max Age</TableCell>
-                <TableCell style={headStyle} align="left">Rule of Excess</TableCell>
-                <TableCell style={headStyle} align="left">Max Excess Covered</TableCell>
-                <TableCell style={headStyle} align="left">Prorate Type</TableCell>
-                <TableCell style={headStyle} align="left">Prorate Lookup</TableCell>
-                <TableCell style={headStyle} align="left">Currency</TableCell>
-                <TableCell style={headStyle} align="left">Reinstatement Surgery</TableCell>
-                <TableCell style={headStyle} align="left">Period of Surgery</TableCell>
-                <TableCell style={headStyle} align="right">Status</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
               </TableRow>
             </TableBody>
-            {dataTableIsLoading ?
+            {dataTableIsLoading ? (
-              (
+              <TableBody>
-                <TableBody>
+                <TableRow>
-                  <TableRow>
+                  <TableCell colSpan={8} align="center">
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    Loading
-                  </TableRow>
+                  </TableCell>
-                </TableBody>
+                </TableRow>
-              ) : (
+              </TableBody>
-                dataTableData.data.length == 0 ? 
+            ) : dataTableData.data.length == 0 ? (
-                (
+              <TableBody>
-                  <TableBody>
+                <TableRow>
-                    <TableRow>
+                  <TableCell colSpan={8} align="center">
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    No Data
-                    </TableRow>
+                  </TableCell>
-                  </TableBody>
+                </TableRow>
-                ) : (
+              </TableBody>
-                  <TableBody>
+            ) : (
-                    {dataTableData.data.map(row => (
+              <TableBody>
-                      <Row key={row.id} row={row} />
+                {dataTableData.data.map((row) => (
-                    ))}
+                  <Row key={row.id} row={row} />
-                  </TableBody>
+                ))}
-                )
+              </TableBody>
             )}
           </Table>
         </TableContainer>
-        
+
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-        </Card>
+      </Card>
     </Stack>
   );
 }