diff --git a/assets/Logo.svg b/assets/Logo.svg
deleted file mode 100644
index 604f789..0000000
--- a/assets/Logo.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-
diff --git a/assets/inspo/AndroidApp-Landing.png b/assets/inspo/AndroidApp-Landing.png
new file mode 100644
index 0000000..4537fc7
Binary files /dev/null and b/assets/inspo/AndroidApp-Landing.png differ
diff --git a/assets/inspo/AndroidApp-Menu.png b/assets/inspo/AndroidApp-Menu.png
new file mode 100644
index 0000000..5a59136
Binary files /dev/null and b/assets/inspo/AndroidApp-Menu.png differ
diff --git a/assets/inspo/Brand-Guidelines.png b/assets/inspo/Brand-Guidelines.png
new file mode 100644
index 0000000..14cb7e1
Binary files /dev/null and b/assets/inspo/Brand-Guidelines.png differ
diff --git a/assets/inspo/Web-Admin-Dashboard.png b/assets/inspo/Web-Admin-Dashboard.png
new file mode 100644
index 0000000..2fe72b4
Binary files /dev/null and b/assets/inspo/Web-Admin-Dashboard.png differ
diff --git a/assets/inspo/Web-Hero-Extended.png b/assets/inspo/Web-Hero-Extended.png
new file mode 100644
index 0000000..dcfdba9
Binary files /dev/null and b/assets/inspo/Web-Hero-Extended.png differ
diff --git a/assets/inspo/Web-Hero.png b/assets/inspo/Web-Hero.png
new file mode 100644
index 0000000..8567049
Binary files /dev/null and b/assets/inspo/Web-Hero.png differ
diff --git a/assets/inspo/Web-Menu-v1.png b/assets/inspo/Web-Menu-v1.png
new file mode 100644
index 0000000..a46f841
Binary files /dev/null and b/assets/inspo/Web-Menu-v1.png differ
diff --git a/assets/inspo/Web-Menu-v2.png b/assets/inspo/Web-Menu-v2.png
new file mode 100644
index 0000000..4681c53
Binary files /dev/null and b/assets/inspo/Web-Menu-v2.png differ
diff --git a/assets/logo/thaijointph-isotype-circle.png b/assets/logo/thaijointph-isotype-circle.png
new file mode 100644
index 0000000..734833f
Binary files /dev/null and b/assets/logo/thaijointph-isotype-circle.png differ
diff --git a/assets/logo/thaijointph-isotype-circle.svg b/assets/logo/thaijointph-isotype-circle.svg
new file mode 100644
index 0000000..5a0673b
--- /dev/null
+++ b/assets/logo/thaijointph-isotype-circle.svg
@@ -0,0 +1,8 @@
+
diff --git a/assets/logo/thaijointph-isotype-rounded-square.png b/assets/logo/thaijointph-isotype-rounded-square.png
new file mode 100644
index 0000000..85247d4
Binary files /dev/null and b/assets/logo/thaijointph-isotype-rounded-square.png differ
diff --git a/assets/logo/thaijointph-isotype-rounded-square.svg b/assets/logo/thaijointph-isotype-rounded-square.svg
new file mode 100644
index 0000000..4f0cbf4
--- /dev/null
+++ b/assets/logo/thaijointph-isotype-rounded-square.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/logo/thaijointph-isotype-square.png b/assets/logo/thaijointph-isotype-square.png
new file mode 100644
index 0000000..6931186
Binary files /dev/null and b/assets/logo/thaijointph-isotype-square.png differ
diff --git a/assets/logo/thaijointph-isotype-square.svg b/assets/logo/thaijointph-isotype-square.svg
new file mode 100644
index 0000000..11810bc
--- /dev/null
+++ b/assets/logo/thaijointph-isotype-square.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/logo/thaijointph-logo-primary-circle.png b/assets/logo/thaijointph-logo-primary-circle.png
new file mode 100644
index 0000000..defd0dd
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary-circle.png differ
diff --git a/assets/logo/thaijointph-logo-primary-circle.svg b/assets/logo/thaijointph-logo-primary-circle.svg
new file mode 100644
index 0000000..078b499
--- /dev/null
+++ b/assets/logo/thaijointph-logo-primary-circle.svg
@@ -0,0 +1,27 @@
+
diff --git a/assets/logo/thaijointph-logo-primary-rounded-square.png b/assets/logo/thaijointph-logo-primary-rounded-square.png
new file mode 100644
index 0000000..354bf95
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary-rounded-square.png differ
diff --git a/assets/logo/thaijointph-logo-primary-rounded-square.svg b/assets/logo/thaijointph-logo-primary-rounded-square.svg
new file mode 100644
index 0000000..580d167
--- /dev/null
+++ b/assets/logo/thaijointph-logo-primary-rounded-square.svg
@@ -0,0 +1,27 @@
+
diff --git a/assets/logo/thaijointph-logo-primary-square.png b/assets/logo/thaijointph-logo-primary-square.png
new file mode 100644
index 0000000..1eede80
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary-square.png differ
diff --git a/assets/logo/thaijointph-logo-primary-square.svg b/assets/logo/thaijointph-logo-primary-square.svg
new file mode 100644
index 0000000..9531fd9
--- /dev/null
+++ b/assets/logo/thaijointph-logo-primary-square.svg
@@ -0,0 +1,27 @@
+
diff --git a/assets/logo/thaijointph-logo-primary.png b/assets/logo/thaijointph-logo-primary.png
new file mode 100644
index 0000000..b18fbb5
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary.png differ
diff --git a/assets/logo/thaijointph-logo-primary.svg b/assets/logo/thaijointph-logo-primary.svg
new file mode 100644
index 0000000..99ad198
--- /dev/null
+++ b/assets/logo/thaijointph-logo-primary.svg
@@ -0,0 +1,26 @@
+
diff --git a/assets/logo/thaijointph-logo-primary_for-dark-bgs@4x.png b/assets/logo/thaijointph-logo-primary_for-dark-bgs@4x.png
new file mode 100644
index 0000000..d3a9175
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary_for-dark-bgs@4x.png differ
diff --git a/assets/logo/thaijointph-logo-primary_for-light-bgs.svg b/assets/logo/thaijointph-logo-primary_for-light-bgs.svg
new file mode 100644
index 0000000..4d5b4ce
--- /dev/null
+++ b/assets/logo/thaijointph-logo-primary_for-light-bgs.svg
@@ -0,0 +1,26 @@
+
diff --git a/assets/logo/thaijointph-logo-primary_for-light-bgs@4x.png b/assets/logo/thaijointph-logo-primary_for-light-bgs@4x.png
new file mode 100644
index 0000000..6d61587
Binary files /dev/null and b/assets/logo/thaijointph-logo-primary_for-light-bgs@4x.png differ
diff --git a/assets/product-img/BEVERAGES/Thai Green Milk Tea.webp b/assets/product-img/BEVERAGES/Thai Green Milk Tea.webp
new file mode 100644
index 0000000..1db3fdd
Binary files /dev/null and b/assets/product-img/BEVERAGES/Thai Green Milk Tea.webp differ
diff --git a/assets/product-img/BEVERAGES/Thai Pink Milk Tea.webp b/assets/product-img/BEVERAGES/Thai Pink Milk Tea.webp
new file mode 100644
index 0000000..815127b
Binary files /dev/null and b/assets/product-img/BEVERAGES/Thai Pink Milk Tea.webp differ
diff --git a/assets/product-img/BEVERAGES/milktea.jpg b/assets/product-img/BEVERAGES/milktea.jpg
new file mode 100644
index 0000000..048fa91
Binary files /dev/null and b/assets/product-img/BEVERAGES/milktea.jpg differ
diff --git a/assets/product-img/DESSERTS/Mango Sticky Rice.jpg b/assets/product-img/DESSERTS/Mango Sticky Rice.jpg
new file mode 100644
index 0000000..a227c64
Binary files /dev/null and b/assets/product-img/DESSERTS/Mango Sticky Rice.jpg differ
diff --git a/assets/product-img/DESSERTS/Ube Mango Sticky Rice.jpg b/assets/product-img/DESSERTS/Ube Mango Sticky Rice.jpg
new file mode 100644
index 0000000..1ca7461
Binary files /dev/null and b/assets/product-img/DESSERTS/Ube Mango Sticky Rice.jpg differ
diff --git a/assets/product-img/MAINS/Chicken Pad Thai Family Size.jpg b/assets/product-img/MAINS/Chicken Pad Thai Family Size.jpg
new file mode 100644
index 0000000..d147a0b
Binary files /dev/null and b/assets/product-img/MAINS/Chicken Pad Thai Family Size.jpg differ
diff --git a/assets/product-img/MAINS/Thai Pork Belly.jpg b/assets/product-img/MAINS/Thai Pork Belly.jpg
new file mode 100644
index 0000000..f014315
Binary files /dev/null and b/assets/product-img/MAINS/Thai Pork Belly.jpg differ
diff --git a/assets/product-img/MAINS/Thai-Pork-Belly-01.jpg b/assets/product-img/MAINS/Thai-Pork-Belly-01.jpg
new file mode 100644
index 0000000..3415af9
Binary files /dev/null and b/assets/product-img/MAINS/Thai-Pork-Belly-01.jpg differ
diff --git a/assets/product-img/MAINS/bento box 550.webp b/assets/product-img/MAINS/bento box 550.webp
new file mode 100644
index 0000000..c1570fe
Binary files /dev/null and b/assets/product-img/MAINS/bento box 550.webp differ
diff --git a/assets/product-img/MAINS/chicken pad thai 2.jpg b/assets/product-img/MAINS/chicken pad thai 2.jpg
new file mode 100644
index 0000000..2222110
Binary files /dev/null and b/assets/product-img/MAINS/chicken pad thai 2.jpg differ
diff --git a/assets/product-img/MAINS/chicken pad thai.jpg b/assets/product-img/MAINS/chicken pad thai.jpg
new file mode 100644
index 0000000..7f20aed
Binary files /dev/null and b/assets/product-img/MAINS/chicken pad thai.jpg differ
diff --git a/assets/product-img/MAINS/shrimp pad thai.jpg b/assets/product-img/MAINS/shrimp pad thai.jpg
new file mode 100644
index 0000000..3328625
Binary files /dev/null and b/assets/product-img/MAINS/shrimp pad thai.jpg differ
diff --git a/assets/product-img/MAINS/vegan pad thai 2.jpg b/assets/product-img/MAINS/vegan pad thai 2.jpg
new file mode 100644
index 0000000..83fb391
Binary files /dev/null and b/assets/product-img/MAINS/vegan pad thai 2.jpg differ
diff --git a/assets/product-img/MAINS/vegan pad thai 4.jpg b/assets/product-img/MAINS/vegan pad thai 4.jpg
new file mode 100644
index 0000000..6c702b4
Binary files /dev/null and b/assets/product-img/MAINS/vegan pad thai 4.jpg differ
diff --git a/assets/product-img/MAINS/vegan pad thai.jpg b/assets/product-img/MAINS/vegan pad thai.jpg
new file mode 100644
index 0000000..2e21df8
Binary files /dev/null and b/assets/product-img/MAINS/vegan pad thai.jpg differ
diff --git a/assets/product-img/thaijointph_1646608673_2788278105176218950_40649894431.webp b/assets/product-img/thaijointph_1646608673_2788278105176218950_40649894431.webp
new file mode 100644
index 0000000..e96cda4
Binary files /dev/null and b/assets/product-img/thaijointph_1646608673_2788278105176218950_40649894431.webp differ
diff --git a/assets/product-img/thaijointph_1646748760_2789453234396107581_40649894431.webp b/assets/product-img/thaijointph_1646748760_2789453234396107581_40649894431.webp
new file mode 100644
index 0000000..0b5c6a6
Binary files /dev/null and b/assets/product-img/thaijointph_1646748760_2789453234396107581_40649894431.webp differ
diff --git a/assets/product-img/thaijointph_1650194012_2818354104680490084_40649894431.webp b/assets/product-img/thaijointph_1650194012_2818354104680490084_40649894431.webp
new file mode 100644
index 0000000..1d171a4
Binary files /dev/null and b/assets/product-img/thaijointph_1650194012_2818354104680490084_40649894431.webp differ
diff --git a/assets/product-img/thaijointph_1656738119_2873250051837514123_40649894431.webp b/assets/product-img/thaijointph_1656738119_2873250051837514123_40649894431.webp
new file mode 100644
index 0000000..c8e7553
Binary files /dev/null and b/assets/product-img/thaijointph_1656738119_2873250051837514123_40649894431.webp differ
diff --git a/assets/product-img/thaijointph_1664702143_2940057134181345783_40649894431.webp b/assets/product-img/thaijointph_1664702143_2940057134181345783_40649894431.webp
new file mode 100644
index 0000000..07ab194
Binary files /dev/null and b/assets/product-img/thaijointph_1664702143_2940057134181345783_40649894431.webp differ
diff --git a/assets/product-img/thaijointph_1672808162_3008055347588711382_40649894431.jpg b/assets/product-img/thaijointph_1672808162_3008055347588711382_40649894431.jpg
new file mode 100644
index 0000000..7ab7d78
Binary files /dev/null and b/assets/product-img/thaijointph_1672808162_3008055347588711382_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1672834229_3008274008811386921_40649894431.jpg b/assets/product-img/thaijointph_1672834229_3008274008811386921_40649894431.jpg
new file mode 100644
index 0000000..7b5bf4a
Binary files /dev/null and b/assets/product-img/thaijointph_1672834229_3008274008811386921_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1674619650_3023251213312273489_40649894431.jpg b/assets/product-img/thaijointph_1674619650_3023251213312273489_40649894431.jpg
new file mode 100644
index 0000000..6b4d7df
Binary files /dev/null and b/assets/product-img/thaijointph_1674619650_3023251213312273489_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1674994052_3026389960647274078_40649894431.mp4 b/assets/product-img/thaijointph_1674994052_3026389960647274078_40649894431.mp4
new file mode 100644
index 0000000..4059ea3
Binary files /dev/null and b/assets/product-img/thaijointph_1674994052_3026389960647274078_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1676265347_3037056314225002569_40649894431.jpg b/assets/product-img/thaijointph_1676265347_3037056314225002569_40649894431.jpg
new file mode 100644
index 0000000..464618c
Binary files /dev/null and b/assets/product-img/thaijointph_1676265347_3037056314225002569_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1676878622_3042200835648690073_40649894431.jpg b/assets/product-img/thaijointph_1676878622_3042200835648690073_40649894431.jpg
new file mode 100644
index 0000000..fd17d9a
Binary files /dev/null and b/assets/product-img/thaijointph_1676878622_3042200835648690073_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1676878622_3042200835824931597_40649894431.jpg b/assets/product-img/thaijointph_1676878622_3042200835824931597_40649894431.jpg
new file mode 100644
index 0000000..bbfe785
Binary files /dev/null and b/assets/product-img/thaijointph_1676878622_3042200835824931597_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1677295871_3045700974401163342_40649894431.jpg b/assets/product-img/thaijointph_1677295871_3045700974401163342_40649894431.jpg
new file mode 100644
index 0000000..e41930b
Binary files /dev/null and b/assets/product-img/thaijointph_1677295871_3045700974401163342_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1678152713_3052888693564970676_40649894431.jpg b/assets/product-img/thaijointph_1678152713_3052888693564970676_40649894431.jpg
new file mode 100644
index 0000000..2f10a5c
Binary files /dev/null and b/assets/product-img/thaijointph_1678152713_3052888693564970676_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1687170337_3128534004320263978_40649894431.jpg b/assets/product-img/thaijointph_1687170337_3128534004320263978_40649894431.jpg
new file mode 100644
index 0000000..6517606
Binary files /dev/null and b/assets/product-img/thaijointph_1687170337_3128534004320263978_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1687170337_3128534004328803809_40649894431.jpg b/assets/product-img/thaijointph_1687170337_3128534004328803809_40649894431.jpg
new file mode 100644
index 0000000..554e3a5
Binary files /dev/null and b/assets/product-img/thaijointph_1687170337_3128534004328803809_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1687170337_3128534004496493373_40649894431.jpg b/assets/product-img/thaijointph_1687170337_3128534004496493373_40649894431.jpg
new file mode 100644
index 0000000..deb5c43
Binary files /dev/null and b/assets/product-img/thaijointph_1687170337_3128534004496493373_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1687403612_3130490730745097569_40649894431.mp4 b/assets/product-img/thaijointph_1687403612_3130490730745097569_40649894431.mp4
new file mode 100644
index 0000000..5861642
Binary files /dev/null and b/assets/product-img/thaijointph_1687403612_3130490730745097569_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1688361900_3138529424425766860_40649894431.mp4 b/assets/product-img/thaijointph_1688361900_3138529424425766860_40649894431.mp4
new file mode 100644
index 0000000..43c3403
Binary files /dev/null and b/assets/product-img/thaijointph_1688361900_3138529424425766860_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1688444955_3139225944451514818_40649894431.mp4 b/assets/product-img/thaijointph_1688444955_3139225944451514818_40649894431.mp4
new file mode 100644
index 0000000..c927c7f
Binary files /dev/null and b/assets/product-img/thaijointph_1688444955_3139225944451514818_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1688444955_3139226275826931105_40649894431.jpg b/assets/product-img/thaijointph_1688444955_3139226275826931105_40649894431.jpg
new file mode 100644
index 0000000..e2e93b5
Binary files /dev/null and b/assets/product-img/thaijointph_1688444955_3139226275826931105_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1688645439_3140906546455504027_40649894431.mp4 b/assets/product-img/thaijointph_1688645439_3140906546455504027_40649894431.mp4
new file mode 100644
index 0000000..e42ef59
Binary files /dev/null and b/assets/product-img/thaijointph_1688645439_3140906546455504027_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1705495427_3282255229445144052_40649894431.mp4 b/assets/product-img/thaijointph_1705495427_3282255229445144052_40649894431.mp4
new file mode 100644
index 0000000..fd3a5b4
Binary files /dev/null and b/assets/product-img/thaijointph_1705495427_3282255229445144052_40649894431.mp4 differ
diff --git a/assets/product-img/thaijointph_1705829831_3285061183463034885_40649894431.jpg b/assets/product-img/thaijointph_1705829831_3285061183463034885_40649894431.jpg
new file mode 100644
index 0000000..9cae192
Binary files /dev/null and b/assets/product-img/thaijointph_1705829831_3285061183463034885_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1707091200_3293067908170481039_40649894431.jpg b/assets/product-img/thaijointph_1707091200_3293067908170481039_40649894431.jpg
new file mode 100644
index 0000000..07352ef
Binary files /dev/null and b/assets/product-img/thaijointph_1707091200_3293067908170481039_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1707091200_3293067908179027783_40649894431.jpg b/assets/product-img/thaijointph_1707091200_3293067908179027783_40649894431.jpg
new file mode 100644
index 0000000..dc39f60
Binary files /dev/null and b/assets/product-img/thaijointph_1707091200_3293067908179027783_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1707091200_3293067908296238293_40649894431.jpg b/assets/product-img/thaijointph_1707091200_3293067908296238293_40649894431.jpg
new file mode 100644
index 0000000..6771fae
Binary files /dev/null and b/assets/product-img/thaijointph_1707091200_3293067908296238293_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1713260523_3347394342699266501_40649894431.jpg b/assets/product-img/thaijointph_1713260523_3347394342699266501_40649894431.jpg
new file mode 100644
index 0000000..74edee6
Binary files /dev/null and b/assets/product-img/thaijointph_1713260523_3347394342699266501_40649894431.jpg differ
diff --git a/assets/product-img/thaijointph_1715514793_3366303730730264701_40649894431.mp4 b/assets/product-img/thaijointph_1715514793_3366303730730264701_40649894431.mp4
new file mode 100644
index 0000000..e8879de
Binary files /dev/null and b/assets/product-img/thaijointph_1715514793_3366303730730264701_40649894431.mp4 differ
diff --git a/assets/resources/387797813_17990269262358432_1165906930157103431_n.jpg b/assets/resources/387797813_17990269262358432_1165906930157103431_n.jpg
new file mode 100644
index 0000000..4397f2b
Binary files /dev/null and b/assets/resources/387797813_17990269262358432_1165906930157103431_n.jpg differ
diff --git a/assets/resources/421318701_18002494349358432_5792566080601940432_n.jpg b/assets/resources/421318701_18002494349358432_5792566080601940432_n.jpg
new file mode 100644
index 0000000..745f1d8
Binary files /dev/null and b/assets/resources/421318701_18002494349358432_5792566080601940432_n.jpg differ
diff --git a/assets/resources/thaijointph_1710392325_3323334156485403905_40649894431.jpg b/assets/resources/thaijointph_1710392325_3323334156485403905_40649894431.jpg
new file mode 100644
index 0000000..c357200
Binary files /dev/null and b/assets/resources/thaijointph_1710392325_3323334156485403905_40649894431.jpg differ
diff --git a/assets/resources/thaijointph_1710392325_3323334156485601066_40649894431.jpg b/assets/resources/thaijointph_1710392325_3323334156485601066_40649894431.jpg
new file mode 100644
index 0000000..9c3e3ef
Binary files /dev/null and b/assets/resources/thaijointph_1710392325_3323334156485601066_40649894431.jpg differ
diff --git a/docs/planning/presentation-script.md b/docs/planning/presentation-script.md
index a380b32..f9574ad 100644
--- a/docs/planning/presentation-script.md
+++ b/docs/planning/presentation-script.md
@@ -91,43 +91,97 @@ We will present in the same order as the rubric: documentation and planning, res
For documentation, we prepared the README, Structurizr C4 model, system diagrams packet, deployment guide, mobile build guide, and final implementation report.
-The system diagrams packet is the rubric-facing index. It points to the Structurizr C4 architecture model for system architecture, and it contains the supporting DFD, flowchart, sequence, and ERD diagrams.
+The diagram set is split by purpose. For C4 architecture, we use Structurizr DSL because C4 is meant to be a model, not just a drawing. Structurizr lets us define the people, external systems, containers, components, dynamic flow, and deployment environment once, then view the system at different levels.
+
+For the rubric's supporting diagrams, we use `SYSTEM-DIAGRAMS.md`. That file contains the DFD, order lifecycle flowchart, receipt-verification sequence diagram, and ERD. So the architecture model answers "what are the system boundaries and components?" while the DFD and ERD answer "how does data move?" and "how is data stored?"
**Do:** Point to the Rubric Coverage table.
-### 5. Carl - Architecture Diagrams
+### 5. Carl - C4 Architecture: System Context
-**Show:** `http://localhost:8080`, Structurizr views `system-context`, `container-view`, and `production-deployment`.
+**Show:** `http://localhost:8080`, Structurizr view `system-context`.
**Say:**
-This is the C4 architecture model in Structurizr. We use Structurizr instead of Mermaid for C4 because it keeps one architecture model and generates multiple consistent views from it.
+This is the C4 Level 1 System Context view. The purpose of this diagram is to define the boundary of PrepFlow and the outside actors or systems it communicates with.
+
+At the center is PrepFlow. On the left side are the two human users: the customer and the Thai Joint PH admin. The customer uses PrepFlow to browse the menu, place a pre-order, upload receipt proof, and track fulfillment. The admin uses PrepFlow to manage the catalog, verify uploaded receipts, update statuses, and prepare the procurement list.
+
+Around PrepFlow are external systems. Payment apps like GCash, Maya, and bank apps are outside the system. We do not process money directly. PrepFlow only displays seller payment details and stores uploaded receipt proof. Courier apps like Lalamove and Grab are also outside the system. The seller books the courier manually, then stores the courier note or link in PrepFlow.
+
+Cloudinary is external image storage for menu photos, QR images, and receipt screenshots. Transactional email is used for order or password-reset messages when SMTP is configured. Firebase Cloud Messaging is optional support for Android order-status notifications.
+
+The important point in this diagram is scope control: PrepFlow owns ordering, verification, tracking, and prep automation. Payment transfer and courier booking remain outside the system.
+
+**Do:** Point to PrepFlow, Customer, Admin, payment apps, couriers, Cloudinary, email, and FCM.
+
+### 6. Carl - C4 Architecture: Containers
+
+**Show:** `http://localhost:8080`, Structurizr view `container-view`.
+
+**Say:**
+
+This is the C4 Level 2 Container view. It breaks PrepFlow into the major deployable or runtime parts.
+
+The first container is the responsive web application. It is built with Vite, React 18, TypeScript, and Tailwind. It serves both the customer storefront and the role-routed admin dashboard.
+
+The second container is the Android mobile application. It uses Capacitor and wraps the React build, but it also has native mobile capability such as camera or gallery receipt capture and notification support.
+
+The third container is the backend API. This is PHP 8.2 with Laravel 12. It handles session-authenticated JSON API requests for login, orders, payment proof upload, admin verification, prep, settings, email, and notifications.
+
+The fourth container is the operational database. It is MySQL-compatible and stores users, menu data, orders, order items, settings, sessions, audit logs, password-reset tokens, notification tokens, and procurement-related records.
-In `system-context`, PrepFlow connects customers, the Thai Joint PH admin, external payment apps, couriers, Cloudinary, email, and optional FCM notifications.
+This view is also where the API design becomes clear: the web app calls the backend through the same-origin `/api` rewrite, while the mobile app calls the deployed API directly. Both clients use JSON.
-In `container-view`, the system has a responsive React web app, a Capacitor Android app, a PHP Laravel backend API, and a MySQL-compatible operational database.
+**Do:** Point to web app, Android app, backend API, operational database, and the relationship arrows to the API.
-In `production-deployment`, the model shows the current deployment boundaries: web edge, Docker API runtime, managed SQL data plane, provider services, and operations controls.
+### 7. Carl - C4 Architecture: Components and Deployment
-**Do:** Point to customer/admin, web app, mobile app, backend API, database, Cloudinary, and OCR runtime.
+**Show:** `http://localhost:8080`, Structurizr views `api-components`, `client-components`, `receipt-verification-flow`, and `production-deployment`.
+
+**Say:**
+
+At the component level, the backend is organized around Laravel route groups, request guards, controllers, services, and persistence. The route table separates public routes, authenticated customer routes, and admin-only routes. Request guards handle session authentication, CSRF, throttling, and `role:admin` authorization.
+
+The API controllers are separated by responsibility: Auth handles sessions and profiles, Menu handles menu CRUD and recipe ingredients, Order handles checkout and payment proof, Config handles settings like payment methods and batches, Prep handles procurement and inventory, and Notification Token handles native device tokens.
+
+The services show the important technical requirements: `JsonResponds` explicitly returns JSON using `json_encode`, the image validator handles receipt or QR uploads, Receipt OCR extracts advisory text, Mailables send email, and the persistence boundary uses prepared statements, Eloquent, database transactions, and row locks.
+
+The client component view shows the React side: route shell, AuthProvider, API client, TanStack Query hooks, customer workflows, admin workflows, Zustand cart store, and shared zod schemas. This proves that the frontend is not just static pages; it is a structured client application that communicates with the backend.
+
+The dynamic receipt-verification flow shows runtime behavior. A customer uploads a receipt screenshot, the mobile or web client sends it to the API, the backend validates ownership and image data, uploads the proof to Cloudinary, stores OCR hints if available, updates the order to `payment_uploaded`, then the admin verifies or rejects the payment. Confirmed orders then become part of prep and procurement aggregation.
+
+The production deployment view shows where the system runs: Vercel serves the static React build, Render runs the Dockerized PHP API, TiDB Cloud stores the MySQL-compatible data, and provider services handle images, email, and optional push notifications. This also separates application runtime from external services and operational controls.
+
+**Do:** Point to route guards, controllers, JsonResponds, persistence boundary, receipt-verification flow, Vercel, Render API, TiDB, and Cloudinary.
**If Structurizr is not open, show:** `PrepFlow/docs/architecture/workspace.dsl` and `PrepFlow/docs/architecture/README.md`.
-### 6. Carl - DFD, Flowchart, and ERD
+### 8. Carl - DFD, Flowchart, Sequence, and ERD
-**Show:** `PrepFlow/docs/SYSTEM-DIAGRAMS.md`, DFD Level 1, Order Lifecycle Flowchart, and Entity Relationship Diagram sections.
+**Show:** `PrepFlow/docs/SYSTEM-DIAGRAMS.md`, DFD Level 0, DFD Level 1, Order Lifecycle Flowchart, Critical Sequence, and Entity Relationship Diagram sections.
**Say:**
-This DFD shows the main data flow. The customer fetches the menu, creates an order, uploads payment proof, the admin verifies it, and the system generates prep and procurement data.
+Now I will explain the rubric support diagrams.
+
+The DFD Level 0 is the context-level data flow. It shows PrepFlow as one process, with external entities such as Customer, Admin, Cloudinary, email or push services, payment apps, and courier apps. It also shows the data store. This diagram is useful because it explains the system from the user's point of view without exposing internal implementation details.
+
+The DFD Level 1 expands the main process into actual system processes. First, the user authenticates and maintains a session. Second, the customer browses the menu and builds a cart. Third, the system validates batch capacity, shipping tier, and payment method. Fourth, it creates the order transaction. Fifth, it uploads payment proof and stores OCR hints. Sixth, the admin verifies or rejects the payment. Seventh, the system generates prep and procurement data. Eighth, it updates fulfillment and notifies the customer. Ninth, the admin manages catalog and settings.
+
+Each DFD data store maps to actual database tables. For example, users and sessions support authentication, menu items and recipe ingredients support ordering and procurement, batches and payment methods support checkout validation, orders and audit logs support lifecycle tracking, and inventory or purchase tables support prep operations.
The order lifecycle flowchart shows how orders move from pending to payment uploaded, confirmed, preparing, ready, out for delivery, completed, or cancelled.
-The ERD shows the actual persisted tables and foreign-key relationships. The important relationship is menu items to recipe ingredients, because that lets the system convert confirmed orders into a daily ingredient procurement list.
+The sequence diagram focuses on the critical receipt verification path. It shows the exact order of actions: customer uploads the receipt, the API validates it, Cloudinary stores the image, OCR extracts hints when available, the order becomes `payment_uploaded`, the admin reviews it, and confirmed orders feed the prep system.
+
+The ERD shows the actual persisted tables and foreign-key relationships. The core chain is `users -> orders -> order_items -> menu_items`, and `menu_items -> recipe_ingredients`. That relationship is what allows PrepFlow to calculate ingredient procurement from confirmed dish orders.
+
+The ERD also shows operational tables: `payment_methods`, `fulfillment_options`, `batches`, `shipping_zones`, `audit_logs`, inventory tables, password reset tokens, notification tokens, and session-related tables. This proves the project is not using one flat table; it is normalized around the business workflow.
-**Do:** Point to the DFD Level 1, then the lifecycle flowchart, then the ERD tables `users`, `orders`, `order_items`, `menu_items`, and `recipe_ingredients`.
+**Do:** Point to DFD Level 0, DFD Level 1 processes, lifecycle statuses, sequence participants, then ERD tables `users`, `orders`, `order_items`, `menu_items`, and `recipe_ingredients`.
-### 7. Xian - Customer Website Desktop
+### 9. Xian - Customer Website Desktop
**Show:** `https://prepflow-vercel-static.vercel.app`.
@@ -143,7 +197,7 @@ This is the customer web app on desktop. The customer can view the landing page,
4. Add one item to cart.
5. Open Cart.
-### 8. Xian - Responsive Design
+### 10. Xian - Responsive Design
**Show:** Same customer site in responsive browser mode.
@@ -160,7 +214,7 @@ The same interface adapts across desktop, tablet, and mobile. On mobile, the lay
**If live resize fails, show:** `PrepFlow/docs/screenshots/customer-home-desktop.png` and `customer-menu-mobile.png`.
-### 9. Xian - AJAX Proof
+### 11. Xian - AJAX Proof
**Show:** DevTools Network tab beside the customer app.
@@ -175,7 +229,7 @@ Now we are showing AJAX behavior. The page does not reload when data changes. Me
3. Click a menu or cart action.
4. Point to `/api/menu` returning JSON.
-### 10. Xian - Customer Checkout
+### 12. Xian - Customer Checkout
**Show:** Customer checkout page.
@@ -194,7 +248,7 @@ In checkout, the customer selects fulfillment mode, date, delivery option if nee
**Optional only if ready:** Place an order with prepared demo data.
-### 11. Xian - AJAX UX and Errors
+### 13. Xian - AJAX UX and Errors
**Show:** `PrepFlow/apps/web/src/lib/api.ts`.
@@ -210,7 +264,7 @@ The frontend uses a central API wrapper. It sends JSON requests, includes creden
The UI also shows skeletons, loading button states, and toast messages instead of silently failing.
-### 12. Rey - PHP Session Routes
+### 14. Rey - PHP Session Routes
**Show:** `PrepFlow/api/routes/api.php`.
@@ -224,7 +278,7 @@ The backend separates public, authenticated customer, and admin-only routes. Cus
- authenticated `/orders`
- admin prefix with `role:admin`
-### 13. Rey - Session Security
+### 15. Rey - Session Security
**Show:** `PrepFlow/api/app/Http/Controllers/Api/AuthController.php`.
@@ -238,7 +292,7 @@ For PHP session management, login and registration regenerate the session ID usi
- `$request->session()->invalidate()`
- `$request->session()->regenerateToken()`
-### 14. Rey - Role Access
+### 16. Rey - Role Access
**Show:** `PrepFlow/api/app/Http/Middleware/EnsureRole.php`.
@@ -248,7 +302,7 @@ This middleware protects admin features. If the logged-in user does not have the
**Do:** Point to role check and forbidden response.
-### 15. Rey - JSON Responses
+### 17. Rey - JSON Responses
**Show:** `PrepFlow/api/app/Traits/JsonResponds.php`.
@@ -258,7 +312,7 @@ The backend explicitly uses `json_encode` and sets `Content-Type: application/js
**Do:** Point to `json_encode(...)` and the `Content-Type` header.
-### 16. Rey - Database Design
+### 18. Rey - Database Design
**Show:** `PrepFlow/db/schema.sql`.
@@ -276,7 +330,7 @@ Foreign keys protect relationships, indexes support common queries, and the proc
- `recipe_ingredients`
- `v_daily_procurement`
-### 17. Rey - CRUD and Prepared Statements
+### 19. Rey - CRUD and Prepared Statements
**Show:** `PrepFlow/api/app/Http/Controllers/Api/MenuController.php`.
@@ -292,7 +346,7 @@ For CRUD operations, the admin can create, read, update, hide, and delete menu i
This screen is the live CRUD interface. It also manages recipe ingredients, which directly affect the prep list.
-### 18. Rey - Transactions and Capacity Safety
+### 20. Rey - Transactions and Capacity Safety
**Show:** `PrepFlow/api/app/Http/Controllers/Api/OrderController.php`.
@@ -302,7 +356,7 @@ Order creation uses database transactions and row locks. The system checks batch
**Do:** Point to `DB::transaction(...)` and `lockForUpdate()`.
-### 19. Alfonso - Admin Dashboard
+### 21. Alfonso - Admin Dashboard
**Show:** `https://prepflow-vercel-static.vercel.app/admin`.
@@ -316,7 +370,7 @@ This is the admin dashboard. It shows revenue, average order value, customers, r
2. Show dashboard metric cards.
3. Show charts and recent orders.
-### 20. Alfonso - Payment Verification
+### 22. Alfonso - Payment Verification
**Show:** `https://prepflow-vercel-static.vercel.app/admin/orders` or an order detail page under `/admin/orders/:id`.
@@ -333,7 +387,7 @@ OCR is only advisory. It helps the seller read the receipt, but the seller still
3. Open an order detail.
4. Point to receipt proof, expected total, OCR section, status controls, and audit trail.
-### 21. Alfonso - Prep and Procurement
+### 23. Alfonso - Prep and Procurement
**Show:** `https://prepflow-vercel-static.vercel.app/admin/prep`.
@@ -345,7 +399,7 @@ This is the core business value: the owner no longer manually counts dishes from
**Do:** Point to dish totals and ingredient totals.
-### 22. Alfonso - Admin Settings
+### 24. Alfonso - Admin Settings
**Show:** `https://prepflow-vercel-static.vercel.app/admin/settings`.
@@ -355,7 +409,7 @@ The app is configurable. The admin can manage payment methods, QR images, fulfil
**Do:** Show each settings section briefly.
-### 23. Alfonso - Mobile App
+### 25. Alfonso - Mobile App
**Show:** Android emulator or phone with PrepFlow APK.
@@ -377,7 +431,7 @@ It also has mobile-native features: camera and gallery receipt capture, local no
This mobile guide documents the APK build command, debug APK path, API connectivity, and native feature mapping.
-### 24. Alfonso - Verification Evidence
+### 26. Alfonso - Verification Evidence
**Show:** `PrepFlow/README.md`, Verification Gates section, then `PrepFlow/docs/planning/submission-readiness-2026-06-29.md`.
@@ -393,7 +447,7 @@ For verification, the project records backend tests, Pint formatting, web build,
- `bun run build:mobile`
- APK output path
-### 25. Carl - Closing
+### 27. Carl - Closing
**Show:** `https://prepflow-vercel-static.vercel.app/admin/prep` or Structurizr `production-deployment`.