Finalize GEM CYBER platform buildout#56
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideBuilds out GEM Cyber marketing and admin surfaces by adding several new hub/community/assets marketing pages and extending the admin console with Intel, Assets, Incidents, and Clients dashboards, plus wiring those sections into the admin navigation. Class diagram for new GEM Cyber marketing and admin pagesclassDiagram
class AssessmentsPage {
+metadata
+assessments Array
+services Array
+render_hero_section()
+render_assessment_dashboard()
+render_assessment_cards()
+render_services_grid()
+render_request_assessment_CTA()
}
class LeadershipPage {
+metadata
+leadership Array
+securityTeam Array
+render_hero_section()
+render_leadership_team()
+render_security_operations_team()
+render_join_our_team_CTA()
}
class AssetGovernancePage {
+metadata
+policies Array
+riskCategories Array
+render_hero_section()
+render_risk_summary_cards()
+render_governance_policies()
+render_features_grid()
+render_governance_review_CTA()
}
class MembershipPage {
+metadata
+tiers Array
+render_hero_section()
+render_membership_tiers()
+render_membership_stats()
+render_contact_sales_CTA()
}
class AdminClientsPage {
+metadata
+clients Array
+render_client_stats()
+render_clients_table()
}
class AdminAssetsPage {
+metadata
+assets Array
+render_asset_stats()
+render_assets_table()
}
class AdminIncidentsPage {
+metadata
+incidents Array
+render_incident_stats()
+render_incident_list()
}
class AdminIntelPage {
+metadata
+feeds Array
+render_intel_stats()
+render_intel_list()
}
class AdminLayout {
+baseNavItems Array
+render_admin_shell()
}
AdminLayout --> AdminClientsPage
AdminLayout --> AdminAssetsPage
AdminLayout --> AdminIncidentsPage
AdminLayout --> AdminIntelPage
Flow diagram for updated admin navigation and dashboardsflowchart LR
AdminUser[Admin_user]
AdminLayout[AdminLayout_nav]
InboxPage[AdminInboxPage]
IntelPage[AdminIntelPage]
AssetsPage[AdminAssetsPage]
IncidentsPage[AdminIncidentsPage]
ClientsPage[AdminClientsPage]
AdminUser --> AdminLayout
AdminLayout --> InboxPage
AdminLayout --> IntelPage
AdminLayout --> AssetsPage
AdminLayout --> IncidentsPage
AdminLayout --> ClientsPage
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- There’s a lot of repeated UI patterns (stats grids, severity/status pills, list cards) across the new pages; consider extracting reusable components (e.g., , , ) to reduce duplication and keep styles/logic consistent.
- The various data structures (assets, incidents, feeds, policies, etc.) are currently implicit objects; defining shared TypeScript types/enums for things like severity, status, and tiers would help prevent typos and make future changes safer.
- In the threat intel feeds map, you’re using the array index as the React key; prefer a stable unique field (e.g., source + title or an explicit id) to avoid potential rendering issues when the list changes.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- There’s a lot of repeated UI patterns (stats grids, severity/status pills, list cards) across the new pages; consider extracting reusable components (e.g., <StatCard>, <SeverityBadge>, <StatusTag>) to reduce duplication and keep styles/logic consistent.
- The various data structures (assets, incidents, feeds, policies, etc.) are currently implicit objects; defining shared TypeScript types/enums for things like severity, status, and tiers would help prevent typos and make future changes safer.
- In the threat intel feeds map, you’re using the array index as the React key; prefer a stable unique field (e.g., source + title or an explicit id) to avoid potential rendering issues when the list changes.
## Individual Comments
### Comment 1
<location path="src/app/admin/clients/page.tsx" line_range="21-22" />
<code_context>
+ <p className="text-sm text-slate-400">Managed digital, physical, and financial assets with risk classification.</p>
+ </div>
+ </div>
+ <div className="grid grid-cols-4 gap-4 mb-6">
+ {[
+ { label: 'Total Assets', value: '289', color: 'text-white' },
+ { label: 'Total Value', value: '$52.4M', color: 'text-cyan-400' },
</code_context>
<issue_to_address>
**suggestion:** The fixed 4-column stats grid may not degrade well on smaller screens.
`grid-cols-4` will keep four columns even on very small screens, likely making the stats unreadable on mobile. Consider responsive classes (e.g., `grid-cols-2 md:grid-cols-4`) so the layout adapts on smaller viewports.
</issue_to_address>
### Comment 2
<location path="src/app/admin/incidents/page.tsx" line_range="45-50" />
<code_context>
+ <td className="py-3 px-3 text-slate-400">{asset.type}</td>
+ <td className="py-3 px-3 text-cyan-400 font-mono">{asset.value}</td>
+ <td className="py-3 px-3">
+ <span className={`text-xs font-bold px-2 py-0.5 rounded ${
+ asset.risk === 'Critical' ? 'bg-red-500/20 text-red-400' :
+ asset.risk === 'High' ? 'bg-orange-500/20 text-orange-400' :
</code_context>
<issue_to_address>
**suggestion:** Severity/status badge styling logic is duplicated across multiple pages.
Similar ternary chains for these badges appear across multiple admin and non-admin pages (incidents, intel, assets, assessments, etc.). Consider extracting a small reusable `Badge`/`StatusPill` component that maps a type and value to classes to reduce repetition and keep styling and logic consistent as requirements evolve.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| <div className="grid grid-cols-4 gap-4 mb-6"> | ||
| {[ |
There was a problem hiding this comment.
suggestion: The fixed 4-column stats grid may not degrade well on smaller screens.
grid-cols-4 will keep four columns even on very small screens, likely making the stats unreadable on mobile. Consider responsive classes (e.g., grid-cols-2 md:grid-cols-4) so the layout adapts on smaller viewports.
| <span className={`text-xs font-bold px-2 py-0.5 rounded ${ | ||
| inc.severity === 'Critical' ? 'bg-red-500/20 text-red-400' : | ||
| inc.severity === 'High' ? 'bg-orange-500/20 text-orange-400' : | ||
| inc.severity === 'Medium' ? 'bg-yellow-500/20 text-yellow-400' : | ||
| 'bg-slate-700 text-slate-400' | ||
| }`}>{inc.severity}</span> |
There was a problem hiding this comment.
suggestion: Severity/status badge styling logic is duplicated across multiple pages.
Similar ternary chains for these badges appear across multiple admin and non-admin pages (incidents, intel, assets, assessments, etc.). Consider extracting a small reusable Badge/StatusPill component that maps a type and value to classes to reduce repetition and keep styling and logic consistent as requirements evolve.
Merge pull request #56 from support371/claude/analyze-test-coverage-9…
https://claude.ai/code/session_01SBUMqqQjy1X39Pwdg5oZmo
Summary by Sourcery
Expand the GEM Cyber platform with new public-facing hub, community, assets, and admin experiences for security operations.
New Features: