please answer me in traditional chinese.
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.
6. for unlimited redeem (repeatTime = 0), user can use the redeem to get the code until expire, but only one available code can be generated at the same time, until the code expire. so there are two expire date, one for redeem and one for the generated code 

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?