CapSens-SM

## _material_progress_bars.scss
@import 'active_admin/variables/colors';

$customers_states_colors: (
  new:         #BBC6C3,
  contacted:   #70C0C6,
  negociating: #9DEA4F,
  signed:      #329932,
  terminated:  #FF320E
);

## _material_progress_bar.html.erb

<div class="progress-wrapper <%= customer.state %>">
  <span class="state"><%= customer.state %></span>
  <div class="progress">
    <div class="bar" style="width: <%= customer.state_completition_in_percent %>%"></div>
  </div>
</div>


## customer.rb
ActiveAdmin.register Customer do
  decorate_with CustomerDecorator

  index do
    [ other columns logic here ... ]
    column :state do |customer|
      render partial: 'admin/customers/material_progress_bar', locals: { customer: customer }
    end
    actions
  end

## customer_decorator.rb
class CustomerDecorator < Draper::Decorator
  delegate_all
  # [ other decorator logic here ... ]
  def state_completition_in_percent
    customer_state_index = Customer.state.values.index(state).to_f + 1
    return 100 if state == :terminated
    total_states_count_without_terminated_state = Customer.state.values.length - 1
    completion = customer_state_index / total_states_count_without_terminated_state
    (completion * 100).round(0)
  end

## final_form_two_part.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- CSS is inlined in order to make it fit in one file. Of course this is not a good practice for your own project. -->
    <style>

## short_form_page_split_design.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

## short_form_page.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    <style>
      html,
	@import 'active_admin/variables/colors';

	$customers_states_colors: (
	new: #BBC6C3,
	contacted: #70C0C6,
	negociating: #9DEA4F,
	signed: #329932,
	terminated: #FF320E
	);

	<div class="progress-wrapper <%= customer.state %>">
	<span class="state"><%= customer.state %></span>
	<div class="progress">
	<div class="bar" style="width: <%= customer.state_completition_in_percent %>%"></div>
	</div>
	</div>
	ActiveAdmin.register Customer do
	decorate_with CustomerDecorator

	index do
	[ other columns logic here ... ]
	column :state do \|customer\|
	render partial: 'admin/customers/material_progress_bar', locals: { customer: customer }
	end
	actions
	end
	class CustomerDecorator < Draper::Decorator
	delegate_all
	# [ other decorator logic here ... ]
	def state_completition_in_percent
	customer_state_index = Customer.state.values.index(state).to_f + 1
	return 100 if state == :terminated
	total_states_count_without_terminated_state = Customer.state.values.length - 1
	completion = customer_state_index / total_states_count_without_terminated_state
	(completion * 100).round(0)
	end
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

	<!-- CSS is inlined in order to make it fit in one file. Of course this is not a good practice for your own project. -->
	<style>