Skip to content

Design/updating ds page #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ev-sc merged 7 commits into from
Jan 25, 2026
+86 −67
Merged

Design/updating ds page #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9650f63
init
Arbyhisenaj Jan 21, 2026
10c60a7
update colours
Arbyhisenaj Jan 21, 2026
5c63bbb
Update UserDataSourcesList.tsx
Arbyhisenaj Jan 21, 2026
b8588ed
formatting
Arbyhisenaj Jan 22, 2026
8abb12d
Merge branch 'main' into design/updating-ds-page
ev-sc Jan 25, 2026
cac7738
Fix alignment bug
ev-sc Jan 25, 2026
7161f38
Remove test remnant
ev-sc Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 32 additions & 13 deletions src/app/(private)/data-sources/components/UserDataSourcesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
"use client";

import { Boxes, Database, PlusIcon, Users } from "lucide-react";
import { Boxes, Database, PlusIcon, Users, UsersIcon } from "lucide-react";
import { useMemo, useState } from "react";
import { CollectionIcon } from "@/app/map/[id]/components/Icons";
import { mapColors } from "@/app/map/[id]/styles";
import { DataSourceItem } from "@/components/DataSourceItem";
import DataSourceRecordTypeIcon, {
dataSourceRecordTypeColors,
Expand All @@ -30,17 +28,39 @@ export default function UserDataSourcesList({

const memberDataSources = useMemo(
() =>
dataSources?.filter(
(dataSource) => dataSource.recordType === DataSourceRecordType.Members,
),
dataSources
?.filter(
(dataSource) =>
dataSource.recordType === DataSourceRecordType.Members,
)
.sort((a, b) => {
const aDate = a.importInfo?.lastCompleted
? new Date(a.importInfo.lastCompleted).getTime()
: 0;
const bDate = b.importInfo?.lastCompleted
? new Date(b.importInfo.lastCompleted).getTime()
: 0;
return bDate - aDate; // Most recent first
}),
[dataSources],
);

const otherDataSources = useMemo(
() =>
dataSources?.filter(
(dataSource) => dataSource.recordType !== DataSourceRecordType.Members,
),
dataSources
?.filter(
(dataSource) =>
dataSource.recordType !== DataSourceRecordType.Members,
)
.sort((a, b) => {
const aDate = a.importInfo?.lastCompleted
? new Date(a.importInfo.lastCompleted).getTime()
: 0;
const bDate = b.importInfo?.lastCompleted
? new Date(b.importInfo.lastCompleted).getTime()
: 0;
return bDate - aDate; // Most recent first
}),
[dataSources],
);

Expand Down Expand Up @@ -96,8 +116,8 @@ export default function UserDataSourcesList({

{/* Member Collections Section */}
<div>
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
<CollectionIcon color={mapColors.member.color} />
<h2 className="text-lg font-medium mb-4 flex items-center gap-2">
<UsersIcon className="w-4 h-4 text-neutral-500" />
Member data sources
</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 ">
Expand All @@ -122,8 +142,7 @@ export default function UserDataSourcesList({
{/* Other Data Sources Section */}
<div>
<div className="flex items-center mb-6 gap-4">
<h2 className="text-lg font-semibold flex items-center gap-2">
<CollectionIcon color={mapColors.dataSource.color} />
<h2 className="text-lg font-medium flex items-center gap-2">
Other data sources
</h2>
<div className="flex gap-2 flex-wrap">
Expand Down
108 changes: 54 additions & 54 deletions src/components/DataSourceItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { formatDistanceToNow } from "date-fns";
import { Database, RefreshCw } from "lucide-react";
import DataSourceIcon from "@/components/DataSourceIcon";
import { DataSourceType } from "@/server/models/DataSource";
import { cn } from "@/shadcn/utils";
import type { DataSourceType } from "@/server/models/DataSource";
import type { RouterOutputs } from "@/services/trpc/react";

export type DataSourceWithImportInfo = NonNullable<
Expand Down Expand Up @@ -67,15 +67,15 @@ const getDataSourceStyle = (type: DataSourceType | "unknown") => {
const getGeocodingStatus = (dataSource: DataSourceWithImportInfo) => {
const geocodingConfig = dataSource.geocodingConfig;
if (geocodingConfig.type === "None") {
return { status: "No geocoding", color: "text-neutral-500" };
return { status: "No geocoding", color: "text-neutral-400" };
}
if (geocodingConfig.type === "Address") {
return { status: "Address geocoding", color: "text-green-600" };
return { status: "Address geocoding", color: "text-neutral-400" };
}
if (geocodingConfig.type === "Code" || geocodingConfig.type === "Name") {
return { status: "Area-based geocoding", color: "text-blue-600" };
return { status: "Area-based geocoding", color: "text-neutral-400" };
}
return { status: "Geocoding configured", color: "text-blue-600" };
return { status: "Geocoding configured", color: "text-neutral-400" };
};

export function DataSourceItem({
Expand All @@ -96,62 +96,62 @@ export function DataSourceItem({
return (
<div
className={cn(
"h-full flex flex-col gap-2 justify-between p-2 border rounded-lg cursor-pointer transition-all border-neutral-200 shadow-sm hover:bg-neutral-100",
"h-full flex flex-col items-start gap-3 p-4 border rounded-lg cursor-pointer transition-all border-neutral-200 shadow-sm hover:bg-neutral-50 hover:border-neutral-300",
className,
)}
>
<div className="flex items-center gap-2">
{/* Icon */}
<DataSourceIcon type={dataSourceType} />

{/* Content */}
<div className="flex-1 min-w-0 space-y-4">
{/* Header */}
<div className="flex items-start justify-between">
<div className="space-y-1">
<h4 className="font-medium truncate">{dataSource.name}</h4>
</div>

<div className="flex gap-2">
{dataSource.public && (
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">
Public
</span>
)}
{lastImportedText && (
<span className="flex items-center gap-1 px-2 py-1 bg-neutral-100 text-neutral-500 text-xs rounded-sm">
<RefreshCw className="w-3 h-3" />
{lastImportedText}
</span>
)}
</div>
</div>
{/* Header: Icon and Name */}
<div className="flex justify-between gap-2 text-neutral-600">
<div className="flex items-center gap-1">
<DataSourceIcon type={dataSourceType} />
<p className="text-sm font-mono uppercase">{dataSourceType}</p>
</div>
{lastImportedText && (
<span className="text-xs inline-flex items-center gap-1.5 px-2 py-1 bg-blue-50 text-blue-600 rounded-md">
<RefreshCw className="w-3.5 h-3.5" />
{lastImportedText}
</span>
)}
</div>
{/* Stats */}
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-neutral-500">
<span>{dataSource.columnDefs.length} columns</span>
<span className="text-neutral-400">•</span>
<span>{dataSource.recordCount || "Unknown"} records</span>
<span className="text-neutral-400">•</span>
<span>{geocodingStatus.status}</span>
<div className="flex-1 min-w-0">
<h4 className=" text-xl font-medium text-neutral-900 truncate leading-tight">
{dataSource.name}
</h4>
</div>

{/* Type-specific info */}
{dataSourceType === DataSourceType.ActionNetwork && (
<span className="text-xs text-neutral-500">
Activist engagement data
</span>
)}
{dataSourceType === DataSourceType.Mailchimp && (
<span className="text-xs text-neutral-500">Email subscriber data</span>
)}
{dataSource.autoImport && (
<span className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">
<Database className="w-3 h-3" />
Auto-import enabled
</span>
)}
{/* Metadata: Consolidated stats and status */}
<div className="flex flex-col gap-2 text-xs">
{/* Primary stats: Records, columns, and last updated */}
<div className="flex items-center gap-3 flex-wrap">
<span className="text-neutral-700">
{dataSource.recordCount?.toLocaleString() || "Unknown"} records
</span>
<span className="text-neutral-400">•</span>
<span className="text-neutral-600">
{dataSource.columnDefs.length} columns
</span>
</div>

{/* Secondary info: Geocoding (muted) and status badges */}
<div className="flex items-center gap-2 flex-wrap">
<span className={cn("text-xs", geocodingStatus.color)}>
{geocodingStatus.status}
</span>

{dataSource.public && (
<span className="px-1.5 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">
Public
</span>
)}

{dataSource.autoImport && (
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">
<Database className="w-3 h-3" />
Auto-import
</span>
)}
</div>
</div>
</div>
);
}