결과건수

src/assets/css/custom.css

@@ -1204,3 +1204,9 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .flight-approval-layer .react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell .btn{padding: 0.5rem 1rem;}
 
 .flight-approval-layer .__rdt_custom_sort_icon__{position:absolute;right:10%}
+.search-case-list{width:100%;margin-bottom:10px}
+.search-case-list ul{display:flex;}
+.search-case-list ul li{flex:1;text-align:center;font-size:0.875rem;font-weight:500;padding:0.4rem;}
+.search-case-list ul .approval{background-color:rgba(63, 172, 225, 0.4);color:rgb(23, 90, 124);border-top-left-radius:4px;border-bottom-left-radius:4px;}
+.search-case-list ul .not-approved{background-color: rgba(252, 3, 3, 0.4);color:rgb(124, 30, 30)}
+.search-case-list ul .non-target{background-color:#f4f4f4;color:#777;border-top-right-radius:4px;border-bottom-right-radius:4px;}

src/components/flight/FlightApprovalsTable.js

@@ -272,6 +272,15 @@ export default function FlightApprovalsTable(props) {
           {props.startDate} 총 {laancAprvList?.length} 건 결과
         </span>
       </div>
+      <div className='search-case-list'>
+        <div>
+          <ul>
+            <li className='approval'>승인 10건</li>
+            <li className='not-approved'>미승인 10건</li>
+            <li className='non-target'>비대상 10건</li>
+          </ul>
+        </div>
+      </div>
       <div className='invoice-list-wrapper'>
         <Card>
           <div