closes #9

ditch-the-agent/src/components/sections/dashboard/Home/Property/MLSPublishingCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Card, CardContent, Typography, Button, Box } from '@mui/material';
+
+const MLSPublishingCard: React.FC = () => {
+    return (
+        <Card>
+            <CardContent>
+                <Typography variant="h6" gutterBottom>
+                    Publish to MLS
+                </Typography>
+                <Typography variant="body2" color="text.secondary" paragraph>
+                    Publish your property to the MLS. To sites like zillow and redfin.
+                </Typography>
+                <Box sx={{ mt: 2 }}>
+                    <Button variant="contained" color="primary" fullWidth>
+                        Publish Now
+                    </Button>
+                </Box>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default MLSPublishingCard;

ditch-the-agent/src/config/features.ts

@@ -11,6 +11,7 @@ interface FeatureConfig {
 
     // UI Features
     enableFloatingChatButton: boolean;
+    enableMLSPublishing: boolean;
 
     // API Configuration
     apiUrl: string;
@@ -32,6 +33,7 @@ const getFeatureConfig = (): FeatureConfig => {
             enableRealEstateAgentRegistration: false,
             enableRegistration: false,
             enableFloatingChatButton: false,
+            enableMLSPublishing: false,
             apiUrl: 'https://backend.ditchtheagent.com/api/',
             useLiveData: true,
         };
@@ -44,6 +46,7 @@ const getFeatureConfig = (): FeatureConfig => {
             enableRealEstateAgentRegistration: true,
             enableRegistration: true,
             enableFloatingChatButton: true,
+            enableMLSPublishing: true,
             apiUrl: 'https://beta.backend.ditchtheagent.com/api/',
             useLiveData: true,
         };
@@ -55,6 +58,7 @@ const getFeatureConfig = (): FeatureConfig => {
         enableRealEstateAgentRegistration: true,
         enableRegistration: true,
         enableFloatingChatButton: true,
+        enableMLSPublishing: true,
         apiUrl: 'http://127.0.0.1:8010/api/',
         useLiveData: false,
     };

ditch-the-agent/src/pages/Property/PropertyDetailPage.tsx

@@ -25,6 +25,8 @@ import { axiosInstance } from '../../axiosApi';
 import SchoolCard from 'components/sections/dashboard/Home/Property/SchoolCard';
 import { AccountContext } from 'contexts/AccountContext';
 import SellerInformationCard from 'components/sections/dashboard/Home/Property/SellerInformationCard';
+import MLSPublishingCard from 'components/sections/dashboard/Home/Property/MLSPublishingCard';
+import { features } from 'config/features';
 
 const PropertyDetailPage: React.FC = () => {
   // In a real app, you'd get propertyId from URL params or a global state
@@ -296,6 +298,11 @@ const PropertyDetailPage: React.FC = () => {
             <Grid size={{ xs: 12 }}>
               <EstimatedMonthlyCostCard price={parseFloat(priceForAnalysis)} />
             </Grid>
+            {isOwnerOfProperty && features.enableMLSPublishing && (
+              <Grid size={{ xs: 12 }}>
+                <MLSPublishingCard />
+              </Grid>
+            )}
             {!isOwnerOfProperty && (
               <>
                 <Grid size={{ xs: 12 }}>