[V2] (On hold) Refactor invoice designs (#3480)

* Refactor Bold.php & Business.php

* Refactor Clean.php

* Refactor Creative.php

* Update Creative.php

* Refactor Elegant.php

* Refactor Hipster.php

* Refactor Modern.php

* Refactor Photo.php

* Update Plain.php

* Update Plain.php

* Refactor Playful.php

app/Designs/Bold.php

@@ -25,18 +25,13 @@ class Bold extends AbstractDesign
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    $css_url
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
                     <style>
-                    @page: not(:first-of-type)
+                        body {font-size:90%}
-                    { 
+                        @page: not(:first-of-type) { size: auto; margin-top: 5mm; }
-                        size: auto;
-                        margin-top: 5mm;
-                    }
-
                         .table_header_thead_class {text-align:left;}
                         .table_header_td_class {padding-left:3rem; padding-right:3rem; font-size:1.5rem; padding-left:1rem;padding-right:1rem; padding-top:.5rem;padding-bottom:.5rem}
                         .table_body_td_class {background-color:#edf2f7; adding-top:1.25rem;padding-bottom:1.25rem; padding-left:3rem;}
-
                     </style>
                 </head>
 
@@ -91,7 +86,6 @@ class Bold extends AbstractDesign
         return '';
     }
 
-
     public function task_table() {
         return '
             <table class="w-full table-auto mt-8">

app/Designs/Business.php

@@ -14,7 +14,8 @@ namespace App\Designs;
 class Business extends AbstractDesign
 {
 
-	public function __construct() {
+    public function __construct()
+    {
     }
 
     public function includes()
@@ -25,9 +26,10 @@ class Business extends AbstractDesign
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/business.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 
                 <style>
+                    body { font-size:90% }
                     @page
                     {
                         size: auto;
@@ -39,10 +41,9 @@ class Business extends AbstractDesign
                     thead th:last-child {
                         border-top-right-radius: 0.5rem;
                     }
-
+                .table_header_thead_class { border-top-left-radius: .5rem; text-align: left }
-                .table_header_thead_class text-left bg-blue-900
+                .table_header_td_class { color: white; padding: .5rem 1rem; font-weight: 800; background-color: #2a4365; }
-                .table_header_td_class font-semibold text-white px-4 bg-blue-900 py-5
+                .table_body_td_class { color: #c05621; padding: 1rem; border-width: 4px; border-color: white; background-color: #edf2f7; }
-                .table_body_td_class border-4 border-white text-orange-700 px-4 py-4
 
                 </style>
                 </head>
@@ -50,7 +51,8 @@ class Business extends AbstractDesign
         ';
     }
 
-	public function header() {
+    public function header()
+    {
 
         return '
                 <div class="my-16 mx-10">
@@ -71,7 +73,8 @@ class Business extends AbstractDesign
 
     }
 
-	public function body() {
+    public function body()
+    {
 
         return '
             <div class="flex items-center justify-between mt-20">
@@ -96,7 +99,13 @@ class Business extends AbstractDesign
 
     }
 
-    public function task() {
+    public function task()
+    {
+        return '';
+    }
+
+    public function task_table()
+    {
         return '
             <table class="w-full table-auto mt-20">
                 <thead class="text-left">
@@ -111,8 +120,13 @@ class Business extends AbstractDesign
         ';
     }
 
-    public function product() {
+    public function product()
+    {
+        return '';
+    }
 
+    public function product_table()
+    {
         return '
             <table class="w-full table-auto mt-20">
                 <thead class="text-left">
@@ -124,11 +138,11 @@ class Business extends AbstractDesign
                     $product_table_body
                 </tbody>
             </table>
-            
         ';
     }
 
-	public function footer() {
+    public function footer()
+    {
 
         return '
                 <div class="flex items-center justify-between px-4 pb-4 bg-gray-200 rounded py-2">

app/Designs/Clean.php

@@ -21,29 +21,24 @@ class Clean extends AbstractDesign
     public function includes()
     {
         return '
-        <!DOCTYPE html>
-            <html lang="en">
                 <head>
                     <title>$number</title>
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/clean.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-
-                </head>
-                <body>
-                
                     <style>
+                        body {font-size:90%}
                         @page
                         {
                             size: auto;
                             margin-top: 5mm;
                         }
-
+                        .table_header_thead_class { text-align: left; }
-            .table_header_thead_class text-left
+                        .table_header_td_class { padding: .5rem 1rem;}
-            .table_header_td_class px-4 py-2
+                        .table_body_td_class { border-bottom-width: 1px; border-top-width: 1px; border-color: #cbd5e0; padding: 1rem;}
-            .table_body_td_class text-blue-600 border-t border-b border-gray-400 px-4 py-4
                     </style>
+                </head>
         ';
     }
 
@@ -51,8 +46,6 @@ class Clean extends AbstractDesign
 	public function header() {
 
 		return '
-			
-
                 <div class="px-12 my-10">
                 <div class="flex items-center">
                     <div class="w-1/3">
@@ -67,9 +60,7 @@ class Clean extends AbstractDesign
                         </div>
                     </div>
                 </div>
-            
 			';
-
 	}
 
 	public function body() {
@@ -100,10 +91,33 @@ class Clean extends AbstractDesign
 
 	}
 
-    public function task() {
+    public function task()
+    {
+        return '';
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+            <table class="w-full table-auto mt-8">
+                <thead class="text-left">
+                    <tr>
+                        $task_table_header
+                    </tr>
+                </thead>
+                <tbody>
+                    $task_table_body
+                </tbody>
+            </table>
+        ';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
         return '
             <table class="w-full table-auto mt-8">
             <thead class="text-left">
@@ -115,7 +129,12 @@ class Clean extends AbstractDesign
                 $product_table_body
             </tbody>
         </table>
+        ';
+	}
 
+	public function footer() {
+
+        return '
                 <div class="flex px-4 mt-6 w-full">
                     <div class="w-1/2">
                         $entity.public_notes
@@ -145,12 +164,7 @@ class Clean extends AbstractDesign
                                 <span class="text-blue-600">$balance_due</span>
                             </div>
                         </div>
-        </div>';
+                    </div>
-	}
-
-	public function footer() {
-
-        return '
                 </div>
             </body>
         </html>';

app/Designs/Creative.php

@@ -31,19 +31,19 @@ class Creative extends AbstractDesign
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/creative.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
                 </head>
                 <body>
-                
                 <style>
+                body {font-size:90%}
                 @page
                 {
                     size: auto;
                     margin-top: 6mm;
                 }
-            .table_header_thead_class text-left rounded-lg
+                .table_header_thead_class { text-align: left; border-radius: .5rem; }
-            .table_header_td_class font-medium uppercase text-pink-700 text-xl px-4 py-5
+                .table_header_td_class { text-transform: uppercase; font-size: 1.25rem; color: #b83280; padding: 1.25rem 1rem; font-weight: 500 }
-            .table_body_td_class px-4 py-4
+                .table_body_td_class { padding: 1rem;}
                 </style>
 
         ';
@@ -98,7 +98,28 @@ class Creative extends AbstractDesign
     public function task() {
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+        <table class="w-full table-auto mt-12 border-t-4 border-pink-700 bg-white">
+            <thead class="text-left rounded-lg">
+                <tr>
+                    $task_table_header
+                </tr>
+            </thead>
+            <tbody>
+                $task_table_body
+            </tbody>
+        </table>
+        ';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
 
         return '
         <table class="w-full table-auto mt-12 border-t-4 border-pink-700 bg-white">
@@ -110,8 +131,12 @@ class Creative extends AbstractDesign
             <tbody>
                 $product_table_body
             </tbody>
-        </table>
+        </table>';
+	}
 
+	public function footer() {
+
+        return '
         <div class="border-b-4 border-pink-700">
             <div class="flex items-center justify-between mt-2 px-4 pb-4">
                 <div class="w-1/2">
@@ -142,12 +167,8 @@ class Creative extends AbstractDesign
                     </div>
                 </div>
             </div>
-        </div>';
+        </div>
-	}
 
-	public function footer() {
-
-        return '
         <div class="w-full flex justify-end mt-4">
             <p>Balance Due</p>
             <p class="ml-8 text-pink-700 font-semibold">$5,280.00</p>

app/Designs/Elegant.php

@@ -21,31 +21,24 @@ class Elegant extends AbstractDesign
     public function includes()
     {
         return '
-        <!DOCTYPE html>
-            <html lang="en">
             <head>
                 <title>$number</title>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                 <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/elegant.css"> 
+                <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-                </head>
-                <body>
-                
                 <style>
+                    body {font-size:90%}
                     @page
                     {
                         size: auto;
                         margin-top: 5mm;
                     }
-
+                    .table_header_thead_class { text-align: left; border-bottom-width: 1px; border-style: dashed; border-color: black; }
-             
+                    .table_header_td_class { font-weight: normal; color: #2f855a; padding: .5rem 1rem; }
-            .table_header_thead_class text-left border-dashed border-b border-black
+                    .table_body_td_class { padding: 1rem; }
-            .table_header_td_class font-normal text-green-700 px-4 py-2
-            .table_body_td_class px-4 py-4
-        ];
                 </style>
-
+            </head>
         ';
     }
 
@@ -91,9 +84,11 @@ class Elegant extends AbstractDesign
 	}
 
     public function task() {
+	    return '';
     }
 
-    public function product() {
+    public function task_table()
+    {
         return '
         <table class="w-full table-auto mb-6 mt-16">
             <thead class="text-left border-dashed border-b border-black">
@@ -104,8 +99,31 @@ class Elegant extends AbstractDesign
             <tbody>
                 $product_table_body
             </tbody>
-    </table>
+        </table>';
+    }
 
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
+        return '
+        <table class="w-full table-auto mb-6 mt-16">
+        <thead class="text-left border-dashed border-b border-black">
+            <tr>
+                $product_table_header
+            </tr>
+        </thead>
+        <tbody>
+            $product_table_body
+        </tbody>
+    </table>';
+	}
+
+	public function footer() {
+
+        return '
             <div class="flex items-center justify-between mt-2 px-4 pb-4">
                 <div class="w-1/2">
                     <div class="flex flex-col">
@@ -138,19 +156,12 @@ class Elegant extends AbstractDesign
                         <p class="text-right w-1/2">$balance</p>
                     </section>
                 </div>
-    </div>';
+            </div>
-	}
+                    <div class="flex justify-center border-b-4 border-black mt-6">
-
-	public function footer() {
-
-        return '<div class="flex justify-center border-b-4 border-black mt-6">
                     <h4 class="text-2xl font-semibold mb-4">Thanks</h4>
                 </div>
                 <div class="p-px border-b border-black mt-1"></div>
-            </div>
+            </div>';
-
-                </body>
-            </html>';
 
 	}
 

app/Designs/Hipster.php

@@ -21,31 +21,25 @@ class Hipster extends AbstractDesign
     public function includes()
     {
         return '
-        <!DOCTYPE html>
-            <html lang="en">
             <head>
                 <title>$number</title>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                 <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/hipster.css"> 
+                <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-
-                </head>
-                <body>
-                
                 <style>
+                body {font-size:90%}
                 @page
                 {
                     size: auto;
                     margin-top: 5mm;
                 }
 
-            .table_header_thead_classtext-left
+                .table_header_thead_class { text-align: left }
-            .table_header_td_class px-4 py-2 uppercase font-semibold border-l-2 border-black
+                .table_header_td_class { text-transform: uppercase; padding: .5rem 1rem; font-weight: 600; border-color: black;  }
-            .table_body_td_class border-l-2 border-black px-4 py-4
+                .table_body_td_class { border-left-width: 2px; border-color: black; padding: 1rem; }
                 </style>
-
+            </head>
-
         ';
     }
 
@@ -105,9 +99,32 @@ class Hipster extends AbstractDesign
 	}
 
     public function task() {
+	    return '';
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+	    <table class="w-full table-auto mt-24">
+            <thead class="text-left">
+                <tr>
+                    $task_table_header
+                </tr>
+            </thead>
+            <tbody>
+                $task_table_body
+            </tbody>
+        </table>
+        ';
+    }
+
+    public function product()
+    {
+	    return '
+        ';
+    }
+
+    public function product_table() {
         return '
         <table class="w-full table-auto mt-24">
             <thead class="text-left">
@@ -118,8 +135,12 @@ class Hipster extends AbstractDesign
             <tbody>
                 $product_table_body
             </tbody>
-        </table>
+        </table>';
+	}
 
+	public function footer() {
+
+        return '
                 <div class="flex justify-between mt-8">
                         <div class="w-1/2">
                             <div class="flex flex-col">
@@ -146,12 +167,7 @@ class Hipster extends AbstractDesign
                                 <p class="text-right w-1/2">$balance_due</p>
                             </section>
                         </div>
-    </div>';
+                    </div>
-	}
-
-	public function footer() {
-
-        return '
                 </div>
             </body>
         </html>';

app/Designs/Modern.php

@@ -28,10 +28,9 @@ class Modern extends AbstractDesign
 			        <meta charset="utf-8">
 			        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 			        <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/modern.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 			        <style>
-                    
+                      body {font-size:90%}
-
     				 .table_header_thead_class {text-align:left; text-align:left; color:#fff; background-color:#1a202c;}
 					 .table_header_td_class {padding-left:1rem;padding-right:1rem; padding-top:.5rem;padding-bottom:.5rem}
 					 .table_body_td_class {border-top-width:1px; border-bottom-width:1px; border-color:#1a202c; padding-left:1rem;padding-right:1rem; padding-top:1rem;padding-bottom:1rem;}
@@ -60,15 +59,9 @@ class Modern extends AbstractDesign
 						footer, header, hgroup, menu, nav, section {
 						    display: block;
 						}
-
-
-			.table_header_thead_class text-left text-white bg-gray-900
-			.table_header_td_class px-4 py-2
-			.table_body_td_class border-t border-b border-gray-900 px-4 py-4
                     </style>
 			    </head>
 				<body>
-
         ';
     }
 
@@ -110,6 +103,7 @@ class Modern extends AbstractDesign
 			        </div>
 			    </div>
 			</div>
+            <div class="px-12 pt-5 pb-20">
 			';
 
 	}
@@ -117,9 +111,29 @@ class Modern extends AbstractDesign
     public function task() {
     }
 
-	public function product() {
+    public function task_table()
+    {
+        return '
+        <table class="w-full table-auto mt-8">
+                <thead class="text-left text-white bg-gray-900 display: table-header-group;">
+                    <tr>
+                        $task_table_header
+                    </tr>
+                </thead>
+                <tbody>
+                        $task_table_body
+                </tbody>
+            </table>
+        ';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+	public function product_table() {
 		return '
-			<div class="px-12 pt-5 pb-20">
             <table class="w-full table-auto mt-8">
                 <thead class="text-left text-white bg-gray-900 display: table-header-group;">
                     <tr>
@@ -130,7 +144,12 @@ class Modern extends AbstractDesign
                         $product_table_body
                 </tbody>
             </table>
+		';
+	}
 
+	public function footer() {
+
+		return '
                 <div class="flex px-4 mt-6 w-full" style="page-break-inside: avoid;">
 			        <div class="w-1/2">
 			            $entity.public_notes
@@ -165,13 +184,6 @@ class Modern extends AbstractDesign
 			    </div>
 
 			</div>
-
-		';
-	}
-
-	public function footer() {
-
-		return '
 			</section>
 			<footer>
 			<div class="div_footer bg-orange-600 flex justify-between py-8 px-12" style="page-break-inside: avoid;">

app/Designs/Photo.php

@@ -28,12 +28,23 @@ class Photo extends AbstractDesign
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/photo.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+                    <style>
+                    body {font-size:90%}
+                    @page {
+                        size: auto;
+                        margin-top: 5mm;
+                    }
+                    #imageContainer {
+                        background-image: url();
+                        background-size: cover;
+                    }
 
+                    .table_header_thead_class { text-align: left; border-bottom-width: 4px; border-color: black; }
+                    .table_header_td_class { font-weight: 400; text-transform: uppercase; padding: 1rem .5rem; }
+                    .table_body_td_class { padding: 1rem; }
+                    </style>
                 </head>
-                <body>
-                
-                
         ';
     }
 
@@ -42,27 +53,6 @@ class Photo extends AbstractDesign
 	public function header() {
 
 		return '
-			
-                <style>
-                @page  
-                { 
-                    size: auto;
-                    margin-top: 5mm;
-                } 
-                </style>
-
-                <style>
-                    #imageContainer {
-                        background-image: url(/assets/images/006-photographer-2.jpg);
-                        background-size: cover;
-                    }
-
-
-            .table_header_thead_class text-left border-b-4 border-black
-            .table_header_td_class font-normal px-4 py-2 uppercase
-            .table_body_td_class text-orange-700 px-4 py-4
-                </style>
-
                 <div class="px-16 py-10">
                     <div class="flex items-center justify-between mt-2s">
                         <div ref="logo">
@@ -100,16 +90,36 @@ class Photo extends AbstractDesign
                         </div>
                     </div>
                 </div>
-            </div>';
+            </div>
+            <div class="px-16 py-16">';
 
 	}
 
     public function task() {
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+            <table class="w-full table-auto">
+                <thead class="text-left border-b-4 border-black">
+                    <tr>
+                        $task_table_header
+                    </tr>
+                </thead>
+                <tbody>
+                    $task_table_body
+                </tbody>
+            </table>';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
         return '
-        <div class="px-16 py-16">
             <table class="w-full table-auto">
                 <thead class="text-left border-b-4 border-black">
                     <tr>
@@ -120,6 +130,12 @@ class Photo extends AbstractDesign
                     $product_table_body
                 </tbody>
             </table>
+            ';
+	}
+
+	public function footer() {
+
+        return '
                             <div class="flex items-center justify-between mt-2 px-4 pb-4">
                         <div class="w-1/2">
                             <div class="flex flex-col">
@@ -153,12 +169,8 @@ class Photo extends AbstractDesign
                             </section>
                         </div>
                     </div>
-        </div>';
+                </div>
-	}
 
-	public function footer() {
-
-        return '
                 </div>
             </body>
         </html>';

app/Designs/Plain.php

@@ -21,33 +21,23 @@ class Plain extends AbstractDesign
     public function includes()
     {
         return '
-        <!DOCTYPE html>
-            <html lang="en">
             <head>
                 <title>$number</title>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                 <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/plain.css"> 
+                <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-                </head>
-                <body>
-                
                 <style>
-                @page  
+                body {font-size:90%}
-                { 
+                @page {
                     size: auto;
                     margin-top: 5mm;
                 }
-
+                .table_header_thead_class { text-align: left; background-color: #e2e8f0 }
-
+                .table_header_td_class { padding: 1rem .5rem; }
-            .table_header_thead_class text-left bg-gray-300
+                .table_body_td_class { padding: 1rem; border-bottom-width: 1px; border-top-width: 2px; border-color: #e2e8f0 }
-            .table_header_td_class px-4 py-2
-            .table_body_td_class border-t-2 border-b border-gray-300 px-4 py-4
-
                 </style>
-
+            </head>
-                <body>
-                
         ';
     }
 
@@ -92,9 +82,30 @@ class Plain extends AbstractDesign
 	}
 
     public function task() {
+	    return '';
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+        <table class="w-full table-auto mt-8">
+            <thead class="text-left bg-gray-300">
+                <tr>
+                    $task_table_header
+                </tr>
+            </thead>
+            <tbody>
+                $task_table_body
+            </tbody>
+        </table>';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
         return '
         <table class="w-full table-auto mt-8">
             <thead class="text-left bg-gray-300">
@@ -105,8 +116,12 @@ class Plain extends AbstractDesign
             <tbody>
                 $product_table_body
             </tbody>
-        </table>
+        </table>';
+	}
 
+	public function footer() {
+
+        return '
                <div class="flex justify-between mt-8">
                 <div class="w-1/2">
                     <div class="flex flex-col">
@@ -132,12 +147,8 @@ class Plain extends AbstractDesign
                         <p class="w-1/2 text-right">$balance_due_label</p>
                         <p class="text-right w-1/2">$balance_due</p>
                     </section>
-            </div>';
+                </div>
-	}
 
-	public function footer() {
-
-        return '
                 </div>
             </body>
         </html>';

app/Designs/Playful.php

@@ -21,28 +21,24 @@ class Playful extends AbstractDesign
     public function includes()
     {
         return '
-        <!DOCTYPE html>
-            <html lang="en">
                 <head>
                     <title>$number</title>
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                     <meta http-equiv="x-ua-compatible" content="ie=edge">
-                    <link rel="stylesheet" href="/css/design/playful.css"> 
+                    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-                </head>
-                <body>
                 <style>
+                body {font-size:90%}
                 @page
                 {
                     size: auto;
                     margin-top: 5mm;
                 }
-
+                .table_header_thead_class { text-align: left; background-color: #319795; border-radius: .5rem; }
-
+                .table_header_td_class { padding: .75rem 1rem; font-weight: 600; }
-            .table_header_thead_class text-left bg-teal-600 rounded-lg
+                .table_body_td_class { padding: 1rem; border-bottom-width: 4px; border-style: dashed; border-color: #319795 }
-            .table_header_td_class font-semibold text-white px-4 py-3
-            .table_body_td_class border-b-4 border-teal-600 text-red-800 px-4 py-4
                 </style>
+            </head>
         ';
     }
 
@@ -100,7 +96,28 @@ class Playful extends AbstractDesign
     public function task() {
     }
 
-    public function product() {
+    public function task_table()
+    {
+        return '
+            <table class="w-full table-auto mt-20 mb-8">
+                <thead class="text-left bg-teal-600 rounded-lg">
+                    <tr>
+                        $task_table_header
+                    </tr>
+                </thead>
+                <tbody>
+                    $task_table_body
+                </tbody>
+            </table>
+        ';
+    }
+
+    public function product()
+    {
+        return '';
+    }
+
+    public function product_table() {
         return '
             <table class="w-full table-auto mt-20 mb-8">
                 <thead class="text-left bg-teal-600 rounded-lg">
@@ -111,8 +128,12 @@ class Playful extends AbstractDesign
                 <tbody>
                     $product_table_body
                 </tbody>
-            </table>
+            </table> ';
+	}
 
+	public function footer() {
+
+        return '
                 <div class="flex items-center justify-between mt-2 px-4 pb-4">
                     <div class="w-1/2">
                         <div class="flex flex-col">
@@ -146,12 +167,8 @@ class Playful extends AbstractDesign
                         </section>
                     </div>
                 </div>
-        </div>';
+            </div>
-	}
 
-	public function footer() {
-
-        return '
                 </div>
             </body>
         </html>';

tests/Integration/DesignTest.php

@@ -2,14 +2,21 @@
 
 namespace Tests\Integration;
 
+use App\Designs\Bold;
+use App\Designs\Business;
+use App\Designs\Clean;
 use App\Designs\Designer;
 use App\Designs\Modern;
 use App\Jobs\Credit\CreateCreditPdf;
 use App\Jobs\Invoice\CreateInvoicePdf;
 use App\Jobs\Quote\CreateQuotePdf;
+use App\Models\ClientContact;
 use App\Models\Design;
 use App\Utils\Traits\GeneratesCounter;
 use App\Utils\Traits\MakesHash;
+use App\Utils\Traits\MakesInvoiceHtml;
+use App\Utils\Traits\Pdf\PdfMaker;
+use Illuminate\Support\Facades\Storage;
 use Tests\MockAccountData;
 use Tests\TestCase;
 
@@ -19,10 +26,18 @@ use Tests\TestCase;
  */
 class DesignTest extends TestCase
 {
+    use MakesInvoiceHtml;
+    use PdfMaker;
   	use MockAccountData;
     use GeneratesCounter;
     use MakesHash;
 
+
+    /**
+     * @var ClientContact
+     */
+    private $contact;
+
     public function setUp() :void
     {
         parent::setUp();
@@ -32,6 +47,7 @@ class DesignTest extends TestCase
 
     public function testInvoiceDesignExists()
     {
+        $this->contact = $this->invoice->client->primary_contact()->first();
 
         $design = Design::find(3);
 
@@ -61,10 +77,18 @@ class DesignTest extends TestCase
 
     public function testQuoteDesignExists()
     {
-
+        $invoice_design = new Clean();
-        $design = Design::find(3);
+        $design_object = new \stdClass;
-
+        $design_object->includes = $invoice_design->includes() ?: '';
-    	$designer = new Designer($this->quote, $design, $this->company->settings->pdf_variables, 'quote');
+        $design_object->header = $invoice_design->header() ?: '';
+        $design_object->body = $invoice_design->body() ?: '';
+        $design_object->product = $invoice_design->product() ?: '';
+        $design_object->task = $invoice_design->task() ?: '';
+        $design_object->footer = $invoice_design->footer() ?: '';
+        $design = new \stdClass;
+        $design->name = 'Dave Rocks';
+        $design->design = $design_object;
+    	$designer = new Designer($this->invoice, $design, $this->company->settings->pdf_variables, 'quote');
 
     	$html = $designer->build()->getHtml();
 
@@ -72,17 +96,12 @@ class DesignTest extends TestCase
 
     	//\Log::error($html);
 
-    	$settings = $this->invoice->client->settings;
+        $html = $this->generateEntityHtml($designer, $this->invoice, $this->contact);
-    	$settings->quote_design_id = "VolejRejNm";
+        $pdf = $this->makePdf(null, null, $html);
 
-        $this->quote->client_id = $this->client->id;
+        $instance = Storage::disk('local')->put('invoice.pdf', $pdf);
-        $this->quote->setRelation('client', $this->client);
-        $this->quote->save();
 
-    	$this->client->settings = $settings;
+        exec('xdg-open ~/Code/invoiceninja/storage/app/invoice.pdf');
-    	$this->client->save();
-
-    	CreateQuotePdf::dispatchNow($this->quote, $this->quote->company, $this->quote->client->primary_contact()->first());
     }
 
     // public function testQuoteDesignWithRepeatingHeader()
@@ -220,4 +239,3 @@ class DesignTest extends TestCase
 
 }
 
-