Enhance Request Feature

apps/db/supabase/migrations/20250620133223_new_migration.sql

@@ -0,0 +1,9 @@
+create type "public"."FEATURE_FLAG" as enum ('ENABLE_AI', 'ENABLE_EDUCATION', 'ENABLE_CHALLENGES', 'ENABLE_QUIZZES');
+
+drop index if exists "public"."workspace_education_access_requests_unique_pending";
+
+alter table "public"."workspace_education_access_requests" add column "feature" "FEATURE_FLAG" not null default 'ENABLE_EDUCATION'::"FEATURE_FLAG";
+
+CREATE UNIQUE INDEX workspace_education_access_requests_unique_pending ON public.workspace_education_access_requests USING btree (ws_id, feature) WHERE (status = 'pending'::text);
+
+

apps/upskii/src/app/[locale]/(dashboard)/[wsId]/(workspace-settings)/approvals/approvals-table.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { approvalsColumns } from './columns';
+import { FeatureFilter } from './feature-filter';
 import { StatusFilter } from './status-filter';
 import { CustomDataTable } from '@/components/custom-data-table';
 import { Button } from '@tuturuuu/ui/button';
@@ -51,11 +52,12 @@
 
   // Get current search parameters
   const status = searchParams.get('status') || undefined;
+  const feature = searchParams.get('feature') || undefined;
   const q = searchParams.get('q') || undefined;
   const page = searchParams.get('page') || '1';
   const pageSize = searchParams.get('pageSize') || '10';
 
-  // Fetch education access requests
+  // Fetch feature access requests
   const fetchApprovals = async (showRefreshLoader = false) => {
     try {
       if (showRefreshLoader) {
@@ -71,9 +73,10 @@
       if (page) queryParams.set('page', page);
       if (pageSize) queryParams.set('pageSize', pageSize);
       if (status && status !== 'all') queryParams.set('status', status);
+      if (feature && feature !== 'all') queryParams.set('feature', feature);
 
       const response = await fetch(
-        `/api/v1/admin/education-access-requests?${queryParams.toString()}`,
+        `/api/v1/admin/feature-requests?${queryParams.toString()}`,
         {
           method: 'GET',
           headers: {
@@ -92,7 +95,7 @@
       const data = await response.json();
       setApprovals(data);
     } catch (error) {
-      console.error('Error fetching education access requests:', error);
+      console.error('Error fetching feature access requests:', error);
       const errorMessage =
         error instanceof Error ? error.message : 'Failed to fetch requests';
       setError(errorMessage);
@@ -106,15 +109,36 @@
   // Fetch data when dependencies change
   useEffect(() => {
     fetchApprovals();
-  }, [status, q, page, pageSize]);
+  }, [status, feature, q, page, pageSize]);
 
   // Handle manual refresh
   const handleRefresh = () => {
     fetchApprovals(true);
   };
 
+  // Handle bulk actions
+
+  // Get feature statistics
+  const getFeatureStats = () => {
+    const stats = {
+      pending: 0,
+      approved: 0,
+      rejected: 0,
+      total: 0,
+    };
+
+    approvals.data.forEach((request) => {
+      stats[request.status]++;
+      stats.total++;
+    });
+
+    return stats;
+  };
+
+  const stats = getFeatureStats();
+
   // Show loading state
-  if (isLoading) {
+  if (isLoading && !isRefreshing) {
     return (
       <div className="flex h-64 items-center justify-center">
         <div className="flex items-center gap-2 text-muted-foreground">
@@ -144,33 +168,58 @@
   return (
     <div className="flex min-h-full w-full flex-col">
       <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          {isLoading && (
-            <>
-              <RefreshCw className="h-4 w-4 animate-spin" />
-              <span>Loading requests...</span>
-            </>
-          )}
-          {!isLoading && (
-            <span>
-              {approvals.count} total request{approvals.count !== 1 ? 's' : ''}
-            </span>
-          )}
+        {isLoading && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <RefreshCw className="h-4 w-4 animate-spin" />
+            <span>Loading requests...</span>
+          </div>
+        )}
+      </div>
+      {/* Statistics and Controls */}
+      <div className="mb-3 space-y-4">
+        {/* Statistics Cards */}
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          <div className="rounded-lg border bg-card p-4">
+            <div className="text-2xl font-bold text-foreground">
+              {stats.total}
+            </div>
+            <div className="text-sm text-muted-foreground">Total Requests</div>
+          </div>
+          <div className="rounded-lg border bg-card p-4">
+            <div className="text-2xl font-bold text-yellow-600">
+              {stats.pending}
+            </div>
+            <div className="text-sm text-muted-foreground">Pending</div>
+          </div>
+          <div className="rounded-lg border bg-card p-4">
+            <div className="text-2xl font-bold text-green-600">
+              {stats.approved}
+            </div>
+            <div className="text-sm text-muted-foreground">Approved</div>
+          </div>
+          <div className="rounded-lg border bg-card p-4">
+            <div className="text-2xl font-bold text-red-600">
+              {stats.rejected}
+            </div>
+            <div className="text-sm text-muted-foreground">Rejected</div>
+          </div>
         </div>
 
-        <div className="flex items-center gap-4">
-          <Button
-            onClick={handleRefresh}
-            disabled={isLoading || isRefreshing}
-            variant="outline"
-            size="sm"
-          >
-            <RefreshCw
-              className={`mr-2 h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
-            />
-            Refresh
-          </Button>
+        <div className="flex items-center justify-end gap-4">
           <StatusFilter currentStatus={status} />
+          <FeatureFilter currentFeature={feature} />
+        </div>
+
+        {/* Controls */}
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            {isLoading && (
+              <>
+                <RefreshCw className="h-4 w-4 animate-spin" />
+                <span>Loading requests...</span>
+              </>
+            )}
+          </div>
         </div>
       </div>
 

apps/upskii/src/app/[locale]/(dashboard)/[wsId]/(workspace-settings)/approvals/columns.tsx

@@ -7,6 +7,10 @@
 import { Badge } from '@tuturuuu/ui/badge';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { BookOpenText, User } from '@tuturuuu/ui/icons';
+import {
+  REQUESTABLE_KEY_TO_FEATURE_FLAG,
+  getRequestableFeature,
+} from '@tuturuuu/utils/feature-flags/requestable-features';
 import { cn } from '@tuturuuu/utils/format';
 import moment from 'moment';
 
@@ -78,16 +82,59 @@
       );
     },
   },
+  {
+    accessorKey: 'feature_requested',
+    header: ({ column }) => (
+      <DataTableColumnHeader t={t} column={column} title="Feature Requested" />
+    ),
+    cell: ({ row }) => {
+      const featureRequested = row.getValue('feature_requested') as string;
+
+      // Try to get the feature configuration
+      let featureConfig = null;
+      let FeatureIcon = BookOpenText; // Default icon
+
+      // Check if it's a feature flag and get the requestable key
+      const featureFlag = featureRequested as any;
+      if (featureFlag) {
+        // Try to find the requestable key for this feature flag
+        const requestableKey = Object.entries(
+          REQUESTABLE_KEY_TO_FEATURE_FLAG
+          // @ts-ignore
+        ).find(([_key, flag]) => flag === featureFlag)?.[0];
+
+        if (requestableKey) {
+          featureConfig = getRequestableFeature(requestableKey as any);
+          if (featureConfig?.icon) {
+            FeatureIcon = featureConfig.icon;
+          }
+        }
+      }
+
+      return (
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-dynamic-blue/10">
+            <FeatureIcon className="h-4 w-4 text-dynamic-blue" />
+          </div>
+          <div className="flex flex-col">
+            <div className="text-sm font-medium text-dynamic-blue">
+              {featureConfig?.name || featureRequested}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {featureRequested}
+            </div>
+          </div>
+        </div>
+      );
+    },
+  },
   {
     accessorKey: 'request_message',
     header: ({ column }) => (
       <DataTableColumnHeader t={t} column={column} title="Request Details" />
     ),
     cell: ({ row }) => (
-      <div className="max-w-64 space-y-1">
-        <div className="text-sm font-medium text-dynamic-blue">
-          Education Features
-        </div>
+      <div className="max-w-64">
         <div className="line-clamp-3 text-sm break-words text-muted-foreground">
           {row.getValue('request_message')}
         </div>

apps/upskii/src/app/[locale]/(dashboard)/[wsId]/(workspace-settings)/approvals/feature-filter.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import {
+  getRequestableFeature,
+  getRequestableFeatureKeys,
+} from '@tuturuuu/utils/feature-flags/requestable-features';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface FeatureFilterProps {
+  currentFeature?: string;
+}
+
+export function FeatureFilter({ currentFeature }: FeatureFilterProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const handleFeatureChange = (feature: string) => {
+    const params = new URLSearchParams(searchParams);
+
+    if (feature === 'all') {
+      params.delete('feature');
+    } else {
+      params.set('feature', feature);
+    }
+
+    // Reset to first page when filtering
+    params.delete('page');
+
+    router.push(`?${params.toString()}`);
+  };
+
+  const availableFeatures = getRequestableFeatureKeys();
+
+  return (
+    <Select value={currentFeature || 'all'} onValueChange={handleFeatureChange}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Filter by feature" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Features</SelectItem>
+        {availableFeatures.map((featureKey) => {
+          const feature = getRequestableFeature(featureKey);
+          return (
+            <SelectItem key={featureKey} value={featureKey}>
+              {feature.name}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

apps/upskii/src/app/[locale]/(dashboard)/[wsId]/(workspace-settings)/approvals/page.tsx

@@ -31,8 +31,8 @@
   return (
     <>
       <FeatureSummary
-        pluralTitle="Education Access Requests"
-        description="Review and approve education feature requests from workspace creators. Approved requests will automatically enable education features for the respective workspaces."
+        pluralTitle="Feature Access Requests"
+        description="Review and approve feature requests from workspace creators. Manage access to AI, Education, Quizzes, and Challenges features. Approved requests will automatically enable features for the respective workspaces."
       />
       <Separator className="my-4" />
       <ApprovalsTable />