I am developing the online web shop with CodeIgniter 4 framework and making the redeem system to allow the user to use the redeem code.
I have complete the database structure as the following:
external_promo_code, for store the root data of the redeem product:
 	# 	名稱 	類型 	編碼與排序 	屬性 	空值(Null) 	預設值 	備註 	額外資訊 	動作
	1 	id 主鍵 	int(11) 			否 	無 		AUTO_INCREMENT 	修改 修改 	刪除 刪除 	
	2 	pid 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	(product_id)
	3 	startDate 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	4 	endDate 	datetime 			是 	NULL 			修改 修改 	刪除 刪除 	
	5 	period 	int(11) 			是 	NULL 			修改 修改 	刪除 刪除 	
	6 	repeatTime 	int(11) 			是 	NULL 			修改 修改 	刪除 刪除 	
	7 	created_at 	datetime 			是 	NULL 			修改 修改 	刪除 刪除 	
	8 	updated_at 	datetime 			是 	NULL 			修改 修改 	刪除 刪除 	

external_promo_redeem, for store the distrubuted redeem code (the code belong to the user):
 	# 	名稱 	類型 	編碼與排序 	屬性 	空值(Null) 	預設值 	備註 	額外資訊 	動作
	1 	id 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	
	2 	proId 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	(id from external_promo_code)
	3 	userId 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	(purchased user id)
	4 	starttime 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	5 	endtime 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	6 	repeatTime 	int(11) 			是 	NULL 			修改 修改 	刪除 刪除 	(0=unlimited)
	7 	distrubuteDate 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	8 	status 	int(11) 			否 	1 			修改 修改 	刪除 刪除 	

external_promo_redeem_records, for store the redeemed code record:
 	# 	名稱 	類型 	編碼與排序 	屬性 	空值(Null) 	預設值 	備註 	額外資訊 	動作
	1 	id 主鍵 	int(11) 			否 	無 		AUTO_INCREMENT 	修改 修改 	刪除 刪除 	
	2 	proId 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	
	3 	redeemId 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	(id from external_promo_redeem)
	4 	userId 	int(11) 			否 	無 			修改 修改 	刪除 刪除 	
	5 	dateTime 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	6 	expiredDate 	datetime 			否 	無 			修改 修改 	刪除 刪除 	
	7 	checkcode 	text 	utf8mb4_unicode_ci 		否 	無 			修改 修改 	刪除 刪除 	
	8 	status 	int(11) 			否 	1 	1=available 0=used 		修改 修改 	刪除 刪除 	
	9 	usedDate 	datetime 			是 	current_timestamp() 			修改 修改 	刪除 刪除 	
	10 	verifiedSellerID 	int(11) 			是 	NULL 			修改 修改 	刪除 刪除 	


The flow for the redeem code:
1. The seller will setup the product with the type of redeem and related setting (i.e. repeatTIme, startDate, endDate, period) in the management panel, the redeem data will be store in the external_promo_code as the root data.
2. the user can buy the product to get the redeem code, the related purchased redeem code will be store in external_promo_redeem, and will be show in the front-end page to let the user to check and use the redeem
3. the user can use the redeem in the front-end page, the record with checkcode will be generated and stored to external_promo_redeem_records, user is required to use the code within 15 mins, otherwise will be expired and the user need to use the redeem to regenerate the code again.
4. user can browse the available generated code again by redeem the same code until it become expired. User will see the page with the details of redeem (such as the name, seller name), the QRCode with the checkcode data, text of checkcode, and the countdown timer for expire
5. if the used time (the count of generated code with status 0 of the same user) of redeem exceed the repeat time set in external_promo_code, the user cannot use the redeem and should be hidden in the front-end page

Can you first design the front-end page to list all the avaliable redeem with the dummy data, and the redeem page to fulfill the flow step no.4?