           </Tooltip>
         }>
         {
+          countdown = <CountdownLabel key={i}
+                                      dockIndex={i}
+                                      completeTime={@state.docks[i].completeTime}
+                                      isLSC={@state.docks[i].material[0] >= 1000}
+                                      dockName={i18n.resources.__ @state.docks[i].name} />
           if @state.docks[i].countdown > 0
             if @state.docks[i].material[0] >= 1500 && @state.docks[i].material[1] >= 1500 && @state.docks[i].material[2] >= 2000 || @state.docks[i].material[3] >= 1000
               <div className="panel-item kdock-item">
                 <span className="kdock-name">
                   {i18n.resources.__ @state.docks[i].name}
                 </span>
-                <Label className="kdock-timer" bsStyle="danger">
-                  {resolveTime @state.docks[i].countdown}
-                </Label>
+                {countdown}
               </div>
             else
               <div className="panel-item kdock-item">
                 <span className="kdock-name">
                   {i18n.resources.__ @state.docks[i].name}
                 </span>
-                <Label className="kdock-timer" bsStyle="primary">
-                  {resolveTime @state.docks[i].countdown}
-                </Label>
+                {countdown}
               </div>
           else if @state.docks[i].countdown is 0
             <div className="panel-item kdock-item">
               <span className="kdock-name">
                 {i18n.resources.__ @state.docks[i].name}
               </span>
-              <Label className="kdock-timer" bsStyle="success">
-                {resolveTime @state.docks[i].countdown}
-              </Label>
+              {countdown}
             </div>
           else
             <div className="panel-item kdock-item">
               <span className="kdock-name">
                 {i18n.resources.__ @state.docks[i].name}
               </span>
-              <Label className="kdock-timer" bsStyle="default">
-                {resolveTime 0}
-              </Label>
+              {countdown}
             </div>
         }
         </OverlayTrigger>

                  kdock.api_item5
                ]
                completeTime: kdock.api_complete_time
                countdown: getCountDown(kdock.api_complete_time)
            when 3
              docks[id] =
                name: $ships[kdock.api_created_ship_id].api_name

          setTimeout warn.bind(@, __("The development of %s was failed.", "#{window.i18n.resources.__ $slotitems[parseInt(body.api_fdata.split(',')[1])].api_name}")), showItemDevResultDelay
        else if body.api_create_flag == 1
          setTimeout success.bind(@, __("The development of %s was successful.", "#{window.i18n.resources.__ $slotitems[body.api_slot_item.api_slotitem_id].api_name}")), showItemDevResultDelay
  componentDidMount: ->
    window.addEventListener 'game.response', @handleResponse
    window.addEventListener 'view.main.visible', @handleVisibleResponse
  componentWillUnmount: ->
    window.removeEventListener 'game.response', @handleResponse
    window.removeEventListener 'view.main.visible', @handleVisibleResponse
  render: ->
    <div>
    {
