Modern translation management requires more than just tools for converting text—it needs a comprehensive interface that gives content teams visibility and control over the entire localization process. This article explores how we implemented a translation management dashboard that combines powerful visualization tools with practical workflow features to streamline the translation process.
At the heart of our dashboard is a powerful statistics section that provides immediate visual feedback on translation progress across all supported languages:
export function StatsSection() {
const [stats, setStats] = useState<{
[key: string]: { total: number; untranslated: number };
}>({});
// ... stats fetching logic
}The statistics section offers several key features:
A global overview showing total translation progress
Individual progress tracking for each supported locale
Visual charts displaying the ratio of translated to untranslated content
Direct links to untranslated content for quick access
This visualization helps teams:
Track overall translation progress
Identify languages needing attention
Set priorities for translation work
Monitor the impact of bulk translation operations
The statistics are powered by a dedicated endpoint that aggregates translation data:
export const statsEndpoint: Endpoint = {
path: "/stats",
method: "get",
handler: async (req, res) => {
if (!rbacHas(ROLE_EDITOR)({ req })) {
return res.status(401).send("Unauthorized");
}
// Fetch total string count
const total = (await req.payload.find({
collection: "ui-strings",
locale: defaultLocale,
limit: 1,
})).totalDocs;
// Calculate untranslated strings per locale
const results = await Promise.all(
locales.map(async (locale) => {
return {
locale,
untranslated: (
await req.payload.find({
collection: "ui-strings",
locale,
where: { text: { equals: null } },
})
).totalDocs,
};
}),
);
// Format response
res.status(200).send(
results.reduce((acc, { locale, untranslated }) => {
acc[locale] = { untranslated, total };
return acc;
}, {}),
);
},
};One of the dashboard's most powerful features is its multi-locale overview, which enables editors to:
View translations across multiple languages simultaneously
Quickly identify missing translations
Spot inconsistencies between languages
Track draft statuses across locales
The overview provides a grid-based interface where:
Rows represent individual translation keys
Columns show different locales
Visual indicators mark drafts and missing translations
Links provide direct access to the editing interface
The overview component combines several UX elements:
<div style={{ display: "flex" }}>
{locales.map((locale) => (
<label key={locale} style={{ display: "flex", width: 100 }}>
<input
type="checkbox"
checked={selectedLocales.includes(locale)}
onChange={() => handleLocaleChange(locale)}
/>
<span>{locale}</span>
</label>
))}
</div>The table view provides rich contextual information:
Translation status indicators (✏️ for untranslated, 📝 for drafts)
Truncated previews of translated content
Direct links to the editing interface
Visual distinction between translated and untranslated content
To accelerate the translation process, the dashboard integrates our AI-powered bulk translation system through a simple interface:
const AddMissingTranslationsButton = () => {
const [isLoading, setIsLoading] = useState(false);
const handleAddMissingTranslations = async () => {
setIsLoading(true);
try {
await fetch("/api/ui-strings/translate/missing", {
method: "get",
});
} catch (error) {
console.error("Error adding missing translations:", error);
} finally {
setIsLoading(false);
window.location.reload();
}
};
return (
<button onClick={handleAddMissingTranslations} disabled={isLoading}>
{isLoading ?
"Working hard at translating everything..." :
"Add All Missing Translations"}
</button>
);
};This integration:
Provides one-click translation of missing content
Shows clear progress indication
Automatically refreshes the view upon completion
Integrates with the draft system for quality control
The dashboard implements several UX optimizations:
Pagination and Filtering
Configurable page size
Smooth navigation between pages
Custom filter options for focusing on specific content
Visual Feedback
Clear status indicators
Progress visualization
Loading states for asynchronous operations
Direct Access
Links to untranslated content
Quick access to editing interfaces
Batch operation triggers
Performance Optimization
Efficient data loading
Pagination for large datasets
Optimistic UI updates
Several areas have been identified for future improvement:
Enhanced Analytics
Translation quality metrics
Team performance tracking
Cost analysis tools
Workflow Improvements
Custom workflow states
Approval process integration
Team assignment features
UI Enhancements
Advanced filtering options
Custom view configurations
Keyboard shortcuts
Integration Features
Export/import functionality
Third-party translation service integration
Automated quality checks
The translation management dashboard serves as a central hub for content localization, combining powerful visualization tools with practical workflow features. By providing clear insights into translation progress and facilitating efficient content management, it helps teams:
Track translation progress effectively
Identify and address gaps in localization
Streamline the translation workflow
Leverage AI capabilities responsibly
This implementation demonstrates how thoughtful interface design can significantly improve the efficiency of translation management while maintaining high quality standards through features like draft support and multi-locale overview.
No comments yet, be the first:
© 2025 by Moritz Thomas