Add MemberModel, ProductModel, and CommentBox component

- Added Member and Product types with corresponding models in Hackathon.ts
- Updated team detail page to query members and products using new models
- Added CommentBox component placeholder at bottom of team page
- Improved product display with links to preview and source code

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/Activity/CommentBox.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Card } from 'react-bootstrap';
+
+export const CommentBox: FC = () => {
+  return (
+    <Card className="mt-4">
+      <Card.Body>
+        <h3 className="h5">Comments</h3>
+        <p className="text-muted">Comment functionality coming soon...</p>
+      </Card.Body>
+    </Card>
+  );
+};

models/Hackathon.ts

@@ -140,3 +140,41 @@ export class ProjectModel extends BiDataTable<Project>() {
     };
   }
 }
+
+export type Member = LarkBase &
+  Record<'summary' | 'person' | 'skills' | 'githubAccount' | 'project' | 'status', TableCellValue>;
+
+export class MemberModel extends BiDataTable<Member>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { githubAccount, ...fields }, ...meta }: TableRecord<Member>) {
+    return {
+      ...meta,
+      ...fields,
+      githubAccount: normalizeText(githubAccount as TableCellText),
+    };
+  }
+}
+
+export type Product = LarkBase &
+  Record<
+    'name' | 'project' | 'template' | 'link' | 'sourceLink' | 'file' | 'summary',
+    TableCellValue
+  >;
+
+export class ProductModel extends BiDataTable<Product>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { link, sourceLink, ...fields }, ...meta }: TableRecord<Product>) {
+    return {
+      ...meta,
+      ...fields,
+      link: normalizeText(link as TableCellText),
+      sourceLink: normalizeText(sourceLink as TableCellText),
+    };
+  }
+}

pages/hackathon/[id]/team/[tid].tsx

@@ -4,10 +4,20 @@ import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Badge, Card, Col, Container, Row, Tab, Tabs } from 'react-bootstrap';
 
+import { CommentBox } from '../../../../components/Activity/CommentBox';
 import { LarkImage } from '../../../../components/LarkImage';
 import { PageHead } from '../../../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../../../models/Activity';
-import { Person, PersonModel, Project, ProjectModel } from '../../../../models/Hackathon';
+import {
+  Member,
+  MemberModel,
+  Person,
+  PersonModel,
+  Product,
+  ProductModel,
+  Project,
+  ProjectModel,
+} from '../../../../models/Hackathon';
 import { I18nContext } from '../../../../models/Translation';
 
 export const getServerSideProps = compose<{ id: string; tid: string }>(
@@ -23,20 +33,34 @@ export const getServerSideProps = compose<{ id: string; tid: string }>(
     const projectModel = new ProjectModel(appId, tableIdMap.Project);
     const team = await projectModel.getOne(params!.tid);
 
+    // Get approved members for this project
+    const members = await new MemberModel(appId, tableIdMap.Member).getAll({
+      project: team.name as string,
+      status: 'approved',
+    });
+
+    // Get person details for members
     const personModel = new PersonModel(appId, tableIdMap.Person);
     const allPeople = await personModel.getAll();
 
-    // Filter team members from all people based on the team's members field
-    const teamMemberNames = (team.members as string[]) || [];
+    // Filter team members from all people based on member records
+    const memberPersonNames = members.map((m) => m.person as string);
     const teamMembers = allPeople.filter((person) =>
-      teamMemberNames.includes(person.name as string),
+      memberPersonNames.includes(person.name as string),
     );
 
+    // Get products for this project
+    const products = await new ProductModel(appId, tableIdMap.Product).getAll({
+      project: team.name as string,
+    });
+
     return {
       props: {
         activity,
         team,
         teamMembers,
+        members,
+        products,
       },
     };
   },
@@ -46,9 +70,11 @@ interface TeamPageProps {
   activity: Activity;
   team: Project;
   teamMembers: Person[];
+  members: Member[];
+  products: Product[];
 }
 
-const TeamPage: FC<TeamPageProps> = observer(({ activity, team, teamMembers }) => {
+const TeamPage: FC<TeamPageProps> = observer(({ activity, team, teamMembers, products }) => {
   const { t } = useContext(I18nContext);
 
   const { name: activityName } = activity;
@@ -134,12 +160,39 @@ const TeamPage: FC<TeamPageProps> = observer(({ activity, team, teamMembers }) =
             </Tab>
             <Tab eventKey="teamWork" title={t('team_works')} className="pt-2">
               <div className="mt-3">
-                {team.products && (team.products as string[]).length > 0 ? (
+                {products && products.length > 0 ? (
                   <ul className="list-unstyled">
-                    {(team.products as string[]).map((product, index) => (
-                      <li key={index} className="mb-2">
-                        <Card body>
-                          <h5>{product}</h5>
+                    {products.map((product) => (
+                      <li key={product.id as string} className="mb-3">
+                        <Card>
+                          <Card.Body>
+                            <h5>{product.name as string}</h5>
+                            {product.summary && (
+                              <p className="text-muted">{product.summary as string}</p>
+                            )}
+                            <div className="d-flex gap-2 mt-2">
+                              {product.link && (
+                                <a
+                                  href={product.link as string}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="btn btn-sm btn-outline-primary"
+                                >
+                                  {t('preview')}
+                                </a>
+                              )}
+                              {product.sourceLink && (
+                                <a
+                                  href={product.sourceLink as string}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="btn btn-sm btn-outline-secondary"
+                                >
+                                  {t('source_code')}
+                                </a>
+                              )}
+                            </div>
+                          </Card.Body>
                         </Card>
                       </li>
                     ))}
@@ -175,6 +228,8 @@ const TeamPage: FC<TeamPageProps> = observer(({ activity, team, teamMembers }) =
           </Col>
         </Row>
       )}
+
+      <CommentBox />
     </Container>
   );
 });