🖇️🦽 ↝ ↝ [SSG-125 SSM-122 SSM-107 SSM-114]: Final changes, milestone c…

…ards added (initially)

app/tests/singleMissionGuide.tsx

@@ -5,6 +5,7 @@ import { CloudDrizzleIcon, LightbulbIcon, Telescope, ArrowUpIcon, ArrowDownIcon
 import { motion, AnimatePresence } from "framer-motion";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import JournalPage from "@/components/Structures/Missions/Stardust/Journal";
+import MilestoneCard from "@/components/Structures/Missions/Milestones/MilestoneCard";
 
 export interface Mission {
   id: number;
@@ -92,7 +93,8 @@ const defaultMission: Mission = {
   id: 0,
   name: "Welcome to Star Sailors",
   description: "You've been given some basic structures to start your journey. Click on their icons to classify the data they've collected for you. New data & projects are being added weekly.",
-  additionalDescription: "You'll get to explore various missions, starting with basic tasks such as classifying objects in the sky and on Earth. Each task you complete unlocks new insights.", // <JournalPage />
+  // additionalDescription: "You'll get to explore various missions, starting with basic tasks such as classifying objects in the sky and on Earth. Each task you complete unlocks new insights.", // <JournalPage />
+  additionalDescription: <MilestoneCard />,
   icon: LightbulbIcon,
   color: "text-blue-400",
   identifier: "default-starting-mission",
@@ -133,7 +135,7 @@ const SimpleeMissionGuide = () => {
                   <h3 className="text-lg font-semibold text-gray-200">{defaultMission.name}</h3>
                   <p className="text-sm text-gray-400">{defaultMission.description}</p>
                   <Button className="mt-2" variant="outline" onClick={openModal}>
-                    Read More
+                    Weekly goals
                   </Button>
                 </div>
               </CardContent>

components/Structures/Missions/Biologists/BiomassOnPlanet.tsx

@@ -46,7 +46,7 @@ const BiomassStats = () => {
             if ( error ) {
                 return;
             } ;
-
+ 
             setTotalBio(data.length);
 
             const oneYearAgo = new Date();

components/Structures/Missions/Biologists/ResearchStations.tsx

@@ -9,6 +9,7 @@ import { InventoryItem } from "@/types/Items";
 import BiomassStats from "./BiomassOnPlanet";
 import StationModal from "./StationModal"; 
 import ClassificationStats from "../Milestones/ClassificationNumber";
+import MilestoneCard from "../Milestones/MilestoneCard";
 
 const initialStations: Station[] = [
   {
@@ -230,6 +231,7 @@ export function GreenhouseResearchStations() {
             {/* <Milestones milestones={milestones} /> */}
             {/* <div className="py-2"><ClassificationStats /></div> */}
             <div className="py-2"><BiomassStats /></div>
+            <div className="py-2"><MilestoneCard /></div>
           </div>
         </div>
       </div>

components/Structures/Missions/Milestones/MilestoneCard.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { GlassWaterIcon, PawPrintIcon, SnowflakeIcon } from "lucide-react";
+
+const MilestoneCard = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const milestones = [
+        { icon: <PawPrintIcon className="w-5 h-5" />, text: "Find 3 desert creatures" },
+        { icon: <SnowflakeIcon className="w-5 h-5" />, text: "Find ice on a planet" },
+        { icon: <GlassWaterIcon className="w-5 h-5" />, text: "Find a planet in the habitable zone" }
+    ];
+
+    return (
+        <Card className="p-4 w-full max-w-md bg-card border shadow-md rounded-lg">
+            <CardContent className="flex flex-col gap-4">
+                <h1 className="text-xl font-semibold text-blue-600">Weekly Missions</h1>
+                <ul className="space-y-2">
+                    {milestones.map((milestone, index) => (
+                        <li key={index} className="flex items-center gap-2 text-green-700">
+                            {milestone.icon}
+                            <p>{milestone.text}</p>
+                        </li>
+                    ))}
+                </ul>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default MilestoneCard;

constants/Structures/Properties.tsx

@@ -5,7 +5,7 @@ import AutomatonUpgrade from "@/components/Structures/Config/AutomatonUpgradeBox
 import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
 import { StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
 import { StarterLidar } from "@/components/Projects/Lidar/Clouds";
-import { BarChart, BeanIcon, BookAIcon, BookAudioIcon, BookCopy, BookDashedIcon, BriefcaseIcon, CameraIcon, CameraOffIcon, CaravanIcon, CloudCogIcon, CloudDrizzleIcon, CogIcon, ConstructionIcon, DogIcon, DotSquare, EarthIcon, FishIcon, FlagIcon, GemIcon, GlassesIcon, HeartIcon, LockIcon, LucideSalad, MehIcon, MicroscopeIcon, MoonStarIcon, PenBox, PhoneIcon, PickaxeIcon, PowerIcon, RssIcon, SaladIcon, StarIcon, SunIcon, SwitchCamera, TelescopeIcon, TestTubeDiagonal, TestTubeDiagonalIcon, TreePalmIcon, WebcamIcon } from "lucide-react";
+import { BarChart, BeanIcon, BookAIcon, BookAudioIcon, BookCopy, BookDashedIcon, BriefcaseIcon, CameraIcon, CameraOffIcon, CaravanIcon, CloudCogIcon, CloudDrizzleIcon, CogIcon, ConstructionIcon, DogIcon, DotSquare, EarthIcon, FishIcon, FlagIcon, GemIcon, GlassesIcon, HeartIcon, LockIcon, LucideSalad, MehIcon, MicroscopeIcon, MoonStarIcon, PenBox, PhoneIcon, PickaxeIcon, PowerIcon, RssIcon, SaladIcon, StarIcon, SunIcon, SwitchCamera, TelescopeIcon, TestTubeDiagonal, TestTubeDiagonalIcon, TreePalmIcon, Trophy, WebcamIcon } from "lucide-react";
 import StructureRepair from "@/components/Structures/Config/RepairStructure";
 import { RoverPhoto } from "@/components/Projects/Auto/Mars-Photos";
 import { AnomalyRoverPhoto } from "@/components/Structures/Auto/AutomatonClassificationShell";
@@ -35,6 +35,7 @@ import PlanetFour from "@/components/Structures/Missions/Astronomers/SatellitePh
 import AI4M from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars";
 import MySettlementsLocations from "@/content/Classifications/UserLocations";
 import { GreenhouseResearchStations } from "@/components/Structures/Missions/Biologists/ResearchStations";
+import MilestoneCard from "@/components/Structures/Missions/Milestones/MilestoneCard";
 
 interface IndividualStructureProps {
     name?: string;
@@ -157,7 +158,12 @@ export const StructuresConfig: StructureConfig = {
           icon: <FlagIcon className="w-6 h-6 text-[#5e81ac]" />,
           text: "My Locations",
           dynamicComponent: <MySettlementsLocations />
-        }
+        },
+        {
+          icon: <Trophy className="w-6 h-6 text-[#5e81ac]" />,
+          text: "Weekly goals",
+          dynamicComponent: <MilestoneCard />
+        },
         // {
         //   icon: <BarChart className="w-6 h-6 text-[#5e81ac]" />,
         //   text: "View all discoveries",

content/Classifications/UserLocations.tsx

@@ -109,56 +109,65 @@ export default function MySettlementsLocations() {
     return <p>No locations found.</p>;
   }
 
+  // Track the anomalies we've already displayed
+  const displayedAnomalies = new Set<number>();
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
       {myLocations
-         // Ensure only "planet" classifications are shown
-        .map((location) => (
-          <div
-            key={location.id}
-            className="p-4 border border-gray-200 rounded-md shadow-md bg-[#2C4F64]"
-          >
-            <h3 className="font-bold text-lg">
-              {location.anomalyContent || `Location #${location.id}`}
-            </h3>
-            <p>{location.content || ""}</p>
-
-            {location.images && location.images.length > 0 && (
-              <div className="mt-2">
-                {location.relatedClassifications && location.relatedClassifications.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="font-semibold text-md">Related Classifications:</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-300">
-                      {location.relatedClassifications.map((related) => (
-                        <li key={related.id}>
-                          {related.content || `Classification #${related.id}`}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
-                {location.images.map((image, index) => (
-                  <img
-                    key={index}
-                    src={image}
-                    alt={`Location ${location.id} - Image ${index + 1}`}
-                    className="w-full h-auto rounded-md"
-                  />
-                ))}
-              </div>
-            )}
-
-          {/* <ClassificationComments classification={location} /> */}
-
-            <button
-              onClick={() => router.push(`/planets/${location.id}`)}
-              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-700"
+        // Filter out classifications with no related classifications or with duplicate anomaly values
+        .filter(location => 
+          location.relatedClassifications && 
+          location.relatedClassifications.length > 0 &&
+          !displayedAnomalies.has(location.anomaly) // Ensure anomaly is unique
+        )
+        .map((location) => {
+          displayedAnomalies.add(location.anomaly); // Mark this anomaly as displayed
+
+          return (
+            <div
+              key={location.id}
+              className="p-4 border border-gray-200 rounded-md shadow-md bg-[#2C4F64]"
             >
-              View Classification
-            </button>
-          </div>
-        ))}
-        Show asteroids and non-planet location anomalies here (below)
+              <h3 className="font-bold text-lg">
+                {location.anomalyContent || `Location #${location.id}`}
+              </h3>
+              <p>{location.content || ""}</p>
+
+              {location.images && location.images.length > 0 && (
+                <div className="mt-2">
+                  {location.relatedClassifications && location.relatedClassifications.length > 0 && (
+                    <div className="mt-4">
+                      <h4 className="font-semibold text-md">Related Classifications:</h4>
+                      <ul className="list-disc list-inside text-sm text-gray-300">
+                        {location.relatedClassifications.map((related) => (
+                          <li key={related.id}>
+                            {related.content || `Classification #${related.id}`}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                  {location.images.map((image, index) => (
+                    <img
+                      key={index}
+                      src={image}
+                      alt={`Location ${location.id} - Image ${index + 1}`}
+                      className="w-full h-auto rounded-md"
+                    />
+                  ))}
+                </div>
+              )}
+
+              <button
+                onClick={() => router.push(`/planets/${location.id}`)}
+                className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-700"
+              >
+                View Classification
+              </button>
+            </div>
+          );
+        })}
     </div>
   );  
 };