[comp] Production Deploy

.cursor/rules/design-system.mdc

@@ -0,0 +1,67 @@
+---
+description: 
+globs: *.tsx
+alwaysApply: false
+---
+
+Rule Name: design-system
+Description:
+Design System & Component Guidelines
+
+## Design Philosophy
+
+- **B2B, Modern, Flat, Minimal, Elegant**: All UI should follow a clean, professional aesthetic suitable for business applications
+- **Sleek & Minimal**: Avoid visual clutter, use whitespace effectively, keep interfaces clean
+- **Dark Mode First**: Always ensure components work seamlessly in both light and dark modes
+
+## Component Usage
+
+- **Adhere to Base Components**: Minimize custom overrides and stick to shadcn/ui base components whenever possible
+- **Semantic Color Classes**: Use semantic classes like `text-muted-foreground`, `bg-muted/50` instead of hardcoded colors
+- **Dark Mode Support**: Always use dark mode variants like `bg-green-50 dark:bg-green-950/20`, `text-green-600 dark:text-green-400`
+
+## Typography & Sizing
+
+- **Moderate Text Sizes**: Avoid overly large text - prefer `text-base`, `text-sm`, `text-xs` over `text-xl+`
+- **Consistent Hierarchy**: Use `font-medium`, `font-semibold` sparingly, prefer `font-normal` with size differentiation
+- **Tabular Numbers**: Use `tabular-nums` class for numeric data to ensure proper alignment
+
+## Layout & Spacing
+
+- **Consistent Spacing**: Use standard Tailwind spacing scale (`space-y-4`, `gap-6`, etc.)
+- **Card-Based Layouts**: Prefer Card components for content organization
+- **Minimal Padding**: Use conservative padding - `p-3`, `p-4` rather than larger values
+- **Clean Separators**: Use subtle borders (`border-t`, `border-muted`) instead of heavy dividers
+
+## Color & Visual Elements
+
+- **Status Colors**:
+  - Green for completed/success states
+  - Blue for in-progress/info states
+  - Yellow for warnings
+  - Red for errors/destructive actions
+- **Subtle Indicators**: Use small colored dots (`w-2 h-2 rounded-full`) instead of large icons for status
+- **Minimal Shadows**: Prefer `hover:shadow-sm` over heavy shadow effects
+- **Progress Bars**: Keep thin (`h-1`, `h-2`) for minimal visual weight
+
+## Interactive Elements
+
+- **Subtle Hover States**: Use gentle transitions (`transition-shadow`, `hover:shadow-sm`)
+- **Consistent Button Sizing**: Prefer `size="sm"` for most buttons, `size="icon"` for icon-only
+- **Badge Usage**: Keep badges minimal with essential info only (percentages, short status)
+
+## Data Display
+
+- **Shared Design Language**: Ensure related components (cards, overviews, details) use consistent patterns
+- **Minimal Stats**: Present data cleanly without excessive decoration
+- **Contextual Icons**: Use small, relevant icons (`h-3 w-3`, `h-4 w-4`) sparingly for context
+
+## Anti-Patterns to Avoid
+
+- Large text sizes (`text-2xl+` except for main headings)
+- Heavy shadows or borders
+- Excessive use of colored backgrounds
+- Redundant badges or status indicators
+- Complex custom styling overrides
+- Non-semantic color usage (hardcoded hex values)
+- Cluttered layouts with too many visual elements

apps/app/src/app/(app)/[orgId]/controls/[controlId]/components/PoliciesTable.tsx

@@ -2,12 +2,11 @@
 
 import { DataTable } from "@/components/data-table/data-table";
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
-import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
 import { StatusIndicator } from "@/components/status-indicator";
 import { useDataTable } from "@/hooks/use-data-table";
 import { Policy } from "@comp/db/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
 import { Input } from "@comp/ui/input";
+import { Icons } from "@comp/ui/icons";
 import { ColumnDef } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 
@@ -106,35 +105,23 @@ export function PoliciesTable({
 	});
 
 	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>
-					{"Linked Policies"} ({filteredPolicies.length})
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div className="flex items-center mb-4">
-					<Input
-						placeholder={"Search..."}
-						value={searchTerm}
-						onChange={(e) => setSearchTerm(e.target.value)}
-						className="max-w-sm"
-					/>
-					{/* <div className="ml-auto">
-						<DataTableSortList
-							table={table.table}
-							align="end"
-							tableId="policiesTable"
-						/>
-					</div> */}
-				</div>
-				<DataTable
-					table={table.table}
-					rowClickBasePath={`/${orgId}/policies/`}
-					getRowId={(row) => row.id}
-					tableId={"policiesTable"}
+		<div className="space-y-4">
+			<div className="flex items-center">
+				<Input
+					placeholder="Search policies..."
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					className="max-w-sm"
+					leftIcon={<Icons.Search size={16} />}
 				/>
-			</CardContent>
-		</Card>
+			</div>
+
+			<DataTable
+				table={table.table}
+				rowClickBasePath={`/${orgId}/policies/`}
+				getRowId={(row) => row.id}
+				tableId={"policiesTable"}
+			/>
+		</div>
 	);
 }

apps/app/src/app/(app)/[orgId]/controls/[controlId]/components/RequirementsTable.tsx

@@ -2,16 +2,15 @@
 
 import { DataTable } from "@/components/data-table/data-table";
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
-import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
 import { useDataTable } from "@/hooks/use-data-table";
 import type {
 	FrameworkEditorFramework,
 	FrameworkEditorRequirement,
 	FrameworkInstance,
 	RequirementMap,
 } from "@comp/db/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
 import { Input } from "@comp/ui/input";
+import { Icons } from "@comp/ui/icons";
 import { ColumnDef } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 
@@ -21,8 +20,8 @@ interface RequirementsTableProps {
 	orgId: string;
 }
 
-	export function RequirementsTable({
-		requirements,
+export function RequirementsTable({
+	requirements,
 	orgId,
 }: RequirementsTableProps) {
 	const [searchTerm, setSearchTerm] = useState("");
@@ -41,9 +40,10 @@ interface RequirementsTableProps {
 						title={"Name"}
 					/>
 				),
+
 				cell: ({ row }) => {
 					return (
-						<span>
+						<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
 							{row.original.requirement.name}
 						</span>
 					);
@@ -67,7 +67,7 @@ interface RequirementsTableProps {
 				),
 				cell: ({ row }) => {
 					return (
-						<span className="text-muted-foreground">
+						<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
 							{row.original.requirement.description}
 						</span>
 					);
@@ -115,41 +115,28 @@ interface RequirementsTableProps {
 	});
 
 	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>
-					{"Linked Requirements"} (
-					{filteredRequirements.length})
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div className="flex items-center mb-4">
-					<Input
-						placeholder={"Search..."}
-						value={searchTerm}
-						onChange={(e) => setSearchTerm(e.target.value)}
-						className="max-w-sm"
-					/>
-					{/* <div className="ml-auto">
-						<DataTableSortList
-							table={table.table}
-							align="end"
-							tableId="r"
-						/>
-					</div> */}
-				</div>
-				<DataTable
-					table={table.table}
-					rowClickBasePath={`/${orgId}/frameworks`}
-					getRowId={(row) => {
-						// This constructs the path to the specific requirement page
-						// row.requirementId is the FrameworkEditorRequirement.id (e.g. frk_rq_...)
-						// row.frameworkInstanceId is the ID of the FrameworkInstance
-						return `${row.frameworkInstanceId}/requirements/${row.requirementId}`;
-					}}
-					tableId={"r"}
+		<div className="space-y-4">
+			<div className="flex items-center">
+				<Input
+					placeholder="Search requirements..."
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					className="max-w-sm"
+					leftIcon={<Icons.Search size={16} />}
 				/>
-			</CardContent>
-		</Card>
+			</div>
+
+			<DataTable
+				table={table.table}
+				rowClickBasePath={`/${orgId}/frameworks`}
+				getRowId={(row) => {
+					// This constructs the path to the specific requirement page
+					// row.requirementId is the FrameworkEditorRequirement.id (e.g. frk_rq_...)
+					// row.frameworkInstanceId is the ID of the FrameworkInstance
+					return `${row.frameworkInstanceId}/requirements/${row.requirementId}`;
+				}}
+				tableId={"r"}
+			/>
+		</div>
 	);
 }